Question

我有一个图像（5177 x 3451）被调整大小（1000 x 667）到html div我的意思是它给出宽度和高度，以便用户可以正确裁剪图像..所以如何在原始图像上获得实际裁剪选择器（5177 x 3451）？

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

enter image description here

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

Answer 1

假设您在调整图像大小时始终保持图像的纵横比，则以下内容应正常工作（它将返回包含原始图像的选择数据的对象）：

开始X＆amp; Y值对应于您选择的左上角和结束X＆amp; 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));

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

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

2 个答案: