一个图片缩放旋转后，将处理后的图片保存下来，不是整个画布

最近发现ts有一个比较大的问题，就是，图片有旋转后，生成的gcode依然是不旋转的图像，于是排查了一些代码，发现使用的是原始图像的imagedata，唉，感觉好头疼。 图片无论怎么选择，都不会影响图像的imagedata的。烦死…

于是认真查阅测试了paperjs有关 raster的文档，发现没有一个能用的。ri…

然后就开始调研如何将旋转后的图片保存为一个新的图片，其实也并不是一定要新的图片，只需要拿到当前旋转后图像的imagedata数据，进行后续的像素处理就行。

然后就画1天写了一个demo，元素旋转后，点击按钮，生成一个新的图像，并且不携带其他元素。这看似很简单的一个功能，其实设计很多东西，包括变换矩阵，元素的旋转中心，canvas的旋转中心为原点，然后是canvas旋转图片，然后还有就是图片的尺寸，原图的尺寸，原图旋转后的外接矩形尺寸，唉…

今天看一个fabricjs的项目，这个项目也有类似的功能，发现别人是这样写的。

三句话

 item.set({ scaleX: 1, scaleY: 1 });
 item.setCoords();
 json.src = item.toDataURL({ format: 'jpeg' });

json.src 就是原图旋转后的图片，而且是原始尺寸的。不是缩放后的，不会失真，模糊。

用fabricjs写的案例

这就是用paperjs和fabricjs的区别啊。好累啊，🥹