缩放图像后获取图像裁剪的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}; 

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