java - 如果在 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