如果在html div中调整图像大小，如何获得原始图像裁剪选择器？
我有一个图像(5177x3451)，它的大小(1000x667)被调整为html div，我的意思是，它是给定的宽度和高度，以便用户可以裁剪图像properly..so，如何在原始图像(5177x3451)上获得实际的作物选择器？
例如..。在下面的图像中，图像被调整为769 x 577，作物选择器为29,27，但它的实际作物选择器是134,138，那么如何在原始图像上获得这个实际的作物选择器？
如何根据调整后的图像进行选择来计算原始图像的作物尺寸？
回答 2
Stack Overflow用户
发布于 2014-08-03 12:09:31
假设在调整图像大小时始终保持图像的高宽比，则以下内容应该正常工作(它将返回一个包含原始图像的选择数据的对象)：
开始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的选择坐标。
Stack Overflow用户
发布于 2014-08-04 17:29:25
我也试图得到选择器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];
}https://stackoverflow.com/questions/25103426
复制相似问题
腾讯云开发者
