从调整大小的图像获取裁剪坐标

Question

我正在制作一个弹出窗口，用户可以在其中选择图像，对其进行裁剪，然后上传裁剪区域。 问题是，如果用户选择较大的图像，则弹出窗口会很大，因此我尝试为img提供固定大小（或将其放在固定的div中），但是这破坏了我从crop函数获得的坐标（我使用Jcrop btw）。 所以问题是我怎样才能从调整大小后的图像中获得正确的作物坐标。 谢谢。

Answer 1

我无法发表评论以询问详细信息，因此这是根据我的理解给出的答案。 如果您想要更精确的答案，则应添加一些代码（调整图像大小的方式，使用Jcrop的方式等）。
据我了解，用户选择了要在调整大小后的图像上进行裁剪的区域。

您可以做的是计算大小比例。
假设图片为900*900px ，您将其尺寸调整为最大300*300px 。
在这种情况下，比率为originalWidth/resizedWidth 900/300=3 （ originalWidth/resizedWidth ）。
您所要做的就是将裁剪的坐标乘以该比率。

确保您的比例适用于宽度和高度（这取决于调整图像大小的方式）。 如果图像不是正方形，则可能必须计算2个比率（一个代表高度，另一个代表宽度）。 在这种情况下，您必须将所有x值乘以widthRatio并将所有y值乘以heightRatio 。