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

Question

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

{x, y, width, height, rotate}

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

裁剪比例是自由的，所以原图比例和裁剪比例之间没有关系，我也没有原图尺寸。

感谢您的帮助

Answer 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

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

Is there a way to transform a point in the initial photo coordinates after a crop with cropperjs

geometry

cropperjs