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

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

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

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

---

如何根据对调整大小的图像所做的选择计算原始图像的裁剪尺寸？

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

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

演示：

---

---

根据这个问题，我编写了一个教程，解释如何计算调整大小和旋转图像的选择坐标：

我还试图获得选择器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);

旋转代码：

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

---

你能编辑你的问题来澄清你的问题吗？我不知道您是否在询问一种基于对已调整大小的图像所做的选择来计算原始图像裁剪尺寸的方法，或者您是否有这些值，您是否在询问其他问题。我已经编辑了我的问题……但如果图像旋转，那么我如何计算新的X，如果我们考虑P1的起点（左上角）和顺时针方向，我们将知道点P1和P3的XS和Y。如果我们假设图像是顺时针旋转90度的，那么您需要为原始图像计算点P2和P4（P2将成为您的左上角）。P2x=P3x，P2y=P1x，P4x=P1x和P4y=P3y。我希望这是有道理的。如果您仍然有问题，请打开一个新问题，提供具体的细节（例如，图像旋转了多少度，您知道哪些点），以便我或其他人可以提供详细的答案。@Sumit在某个时候，我意识到我之前对基于调整大小的图像的选择所做的评论是错误的，最后我写了一篇教程来解释整个过程。如果您仍然需要它，请在“我的答案”中查看编辑链接。