有没有办法在使用cropperjs裁剪后转换初始照片坐标中的一个点

Posted 2023-05-08

【中文标题】有没有办法在使用cropperjs裁剪后转换初始照片坐标中的一个点

【英文标题】：Is there a way to transform a point in the initial photo coordinates after a crop with cropperjs

【发布时间】：2021-11-08 03:59:03

【问题描述】：

我使用cropperjs裁剪一些图像，我将getData方法的结果保存在数据库中，该方法在图片上以白色返回值。

x, y, width, height, rotate

我的用户可以在裁剪后的图像上放置点在红色空间中，有没有办法检索点在蓝色空间中的坐标？

裁剪比例是免费的，所以原始图像比例和裁剪比例之间没有关系，我没有原始图像大小。

感谢您的帮助

【参考方案1】：

首先获取边界框中的坐标

bbx = redx + x
bby = redy + y

现在围绕边界框中心进行旋转

bluex = bbcenterx + (bbx - bbcenterx) * Cos(rotate) + (bby - bbcentery) * Sin(rotate)
bluey = bbcentery - (bbx - bbcenterx) * Sin(rotate) + (bby - bbcentery) * Cos(rotate)

如果不知道边界框大小，但知道初始图片宽度w和高度h，可以计算边界框中心

bbcenterx = (w * Abs(Sin(rotate)) + h * Abs(Cos(rotate))) / 2
bbcenterx = (w * Abs(Cos(rotate)) + h * Abs(Sin(rotate))) / 2

【讨论】：

所以没有原始图像大小就没有办法做我想做的事吗？

我现在不能说。快速建模显示（视觉上）某些矩形大小的接近坐标，但它们可能并不完全相似。

最后我能够通过一些矩阵变换来检索蓝色坐标。你是对的，原始图像的大小是强制性的。感谢您让我朝着正确的方向前进。