javascript - 放大图像后获取图像裁剪的 x 和 y 坐标

Question

我正在放大图像并裁剪它，但与我的选择相比，我的 x 和 y 坐标似乎总是略有偏差。我认为我缩放 X 和 Y 是错误的，但我不确定还可以尝试什么。

var zoom = 1.5; //set dynamically by the user; ranges from 0.1 to infinity                  
var xPercent = cropDetails.x / imageW; // find how far x is from the left, relative to its size
var yPercent = cropDetails.y / imageH; // find how far y is from the top, relative to its size
var newImageSize = {width: imageW * zoom, height: imageH * zoom}; //find zoomed image width and height
cropDetails.x = newImageSize.width * xPercent; //find new x value for the resized image
cropDetails.y = newImageSize.height * yPercent; //find new y value for the resized image

编辑:有点像 this ，但我不希望内部矩形的大小缩放。

将 X 和 Y 乘以缩放:

预裁剪，缩放至 190%

裁剪后，看起来像是向右下方

当我按比例缩放坐标时，我也会得到相同的结果。

Answer 1

您正在查找图像中 x 和 y 的相对位置。然后，您可以在较大的图像中找到相同的相对点。看起来正确但不必要的复杂。舍入误差会成为问题吗？您是否在任何地方设置裁剪的宽度和高度？

您实际上可以通过缩放它们的位置来找到新的 x 和 y 点。例如(100, 100) 图像中的点 (20, 20) 与 (150, 150) 图像中的点 (30, 30) 位于同一位置。因此，只需将裁剪细节的坐标、宽度和高度乘以缩放比例即可!

var zoom = 1.5;              
cropDetails.x *= zoom;
cropDetails.y *= zoom;
cropDetails.width *= zoom;
cropDetails.height *= zoom;
var newImageSize = {width: imageW * zoom, height: imageH * zoom}; 

尝试一下，让我知道它是否有效!如果没有，您应该发布一些失败的示例，以便我可以帮助您调试。