how to get original image crop selector if image resized in html div?

Question

I have one image (5177 x 3451 ) which is resized (1000 x 667) into html div i mean it is given width and height so that user can crop image properly..so how to get actual crop selector on original image(5177 x 3451)?

for example .... in below image, image is resized to 769 x 577 and crop selector is 29,27 but its actual crop selector is 134,138 so how to get this actual crop selector on original image ?

How to calculate the crop dimensions for the original image based on the selection made on the resized image ?

Answer 1

Assuming that you always keep the aspect ratio of the image when you resize it, the following should work properly (it will return an object containing the selection data for the original image):

The start X & Y values correspond to the top left corner of your selection and the end X & Y values to the lower right corner of it.

function calculate_original_selection(original_width, resized_width, selection_x_start, selection_y_start, selection_x_end, selection_y_end) {
    var ratio = original_width / resized_width;
    var selection_info = new Object();

    selection_info.x_start = Math.round(selection_x_start * ratio);
    selection_info.y_start = Math.round(selection_y_start * ratio);
    selection_info.x_end = Math.round(selection_x_end * ratio);
    selection_info.y_end = Math.round(selection_y_end * ratio);

    return selection_info;
}

//examples:
console.log(calculate_original_selection(5000, 1000, 250, 250, 750, 750));
console.log(calculate_original_selection(200, 100, 25, 25, 75, 75));
console.log(calculate_original_selection(250, 100, 10, 40, 20, 40));

DEMO: http://jsfiddle.net/LE6aS/

---

Derived from this question, I wrote a tutorial explaining how to calculate the selection coordinates of a resized and rotated image: http://burnmind.com/tutorials/calculate-selection-coordinates

Answer 2

I was trying to also trying to get selector X,Y if image is zoomed and dragged to left or right so that its X and Y become negative and it works fine but if image is rotated then how can i calculate new X,Y on original image ?

function calculate_original_selection(original_width, resized_width, selection_x_start, selection_y_start, selection_x_end, selection_y_end,imgX,imgY,cropW,cropH) {

            var ratio = original_width / resized_width;
            var selection_info = new Object();

            if(imgX < 0){
                selection_x_start = selection_x_start + Math.abs(imgX);
            }else{
                selection_x_start = selection_x_start - Math.abs(imgX);
            }

            if(imgY < 0){
                selection_y_start = selection_y_start + Math.abs(imgY);
            }else{
                selection_y_start = selection_y_start - Math.abs(imgY);
            }
            selection_info.x_start = Math.round(selection_x_start * ratio);
            selection_info.y_start = Math.round(selection_y_start * ratio);
            selection_info.x_end = Math.round(selection_x_end * ratio);
            selection_info.y_end = Math.round(selection_y_end * ratio);

// selection_info.w = Math.round(selection_info.x_end - selection_info.x_start) ; // selection_info.h = Math.round(selection_info.y_end - selection_info.y_start) ;

            selection_info.w1 = Math.round(cropW * ratio) ;
            selection_info.h1 = Math.round(cropH * ratio) ;


            return selection_info;
        }

Rotate code :

function rotateXY(x, y, xmid, ymid, a) {
        var cos = Math.cos, sin = Math.sin,                             
        rot_x = cos(a) * x + sin(a) * y;
        rot_y = -sin(a) * x + cos(a) * y;                                         
        // Subtract midpoints, so that midpoint is translated to origin  and add it in the end again              
        // xr = (x - xmid) * cos(a) - (y - ymid) * sin(a)   + xmid, // does give correct X,Y
        // yr = (x - xmid) * sin(a) + (y - ymid) * cos(a)   + ymid;
        //  return [xr, yr];            
        return [rot_x, rot_y];              
    }