CODEWITHSUNDEEP
javascriptjquerycssimagecrop
Lukas
Lukas

Reputation: 7734

Calculate image cropping proportions

I have some cropping feature on my site.

enter image description here

So, the problem is that the real photo size is bigger that cropping area, and when i'm trying to get actual result of this cropping action i get proportions from visible - resized in css - area not from oryginal size of this image. How to calculate cropping proportion from resized to real size this image.

I do this but it's not working correctly, should i use some Math function or what, can anybody help?

var width = img.width;
var height = img.height;

// c.x, c.y, c.w, c.h is cropping coords which i recive from crop plugin callback function
// 360 is modal window size, resized area for displaying img

function showCoords(c) {
    cords_node = {
        "x": c.x ,
        "y": c.y,
        "width": width < c.w ? c.w : (width / 360) * c.w,
        "height": height < c.h ? c.w : (width / 360) * c.w
        /*x2: c.x2,
        y2: c.y2*/
    };
    return cords_node;
}

Upvotes: 1

Views: 1159

Answers (1)

Lu&#237;s Soares
Lu&#237;s Soares

Reputation: 6222

Find out the ratio of change:

// find the ratio of change in H and W...
var ratioW = $('.image')[0].naturalWidth / $('.image').width();
var ratioH = $('.image')[0].naturalHeight / $('.image').height();
var ratio = Math.min(ratioW, ratioH);
// now.. multiply all your coords by 'ratio'
// ...

Upvotes: 3

Related Questions