如果图像在html div中调整了尺寸，如何获取原始图像裁剪选择器？

Question

我有一个图像（5177 x 3451），它已将尺寸（1000 x 667）调整为html div，我的意思是给定了宽度和高度，以便用户可以正确裁剪图像。因此，如何在原始图像上获得实际的裁剪选择器（5177 x 3451）？

例如...在下面的图像中，图像被调整为769 x 577，裁剪选择器为29,27，但其实际裁剪选择器为134,138，那么如何在原始图像上获取此实际裁剪选择器？

如何根据在调整大小后的图像上进行的选择来计算原始图像的裁切尺寸？

Answer 1

假定在调整图像大小时始终保持图像的高宽比，则以下各项应能正常工作（它将返回一个包含原始图像选择数据的对象）：

X和Y的起始值对应于所选内容的左上角，X和Y的终止值对应于所选内容的右下角。

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));

演示： http : //jsfiddle.net/LE6aS/

---

出于这个问题，我写了一个教程来解释如何计算调整大小和旋转后的图像的选择坐标： http : //burnmind.com/tutorials/calculate-selection-coordinates

Answer 2

我正在尝试也尝试获取选择器X，Y，如果图像被缩放并向左或向右拖动，以使其X和Y变为负数并且工作正常，但是如果图像旋转，那么如何在原始图像上计算新的X，Y图片 ？

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;
        }

旋转码：

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];              
    }