使用FabricJS裁剪图像

Question

我想使用(javascript)FabricJS + HTML5画布裁剪图像。

• 帆布背景图像是一种织物图像对象。
• 作物面积是一个FabricJS矩形。

我也附上了一张照片。(您可以看到我想要完成的任务)是否可以以某种方式调整FabricJS画布的大小，以保留由矩形(绿色虚线矩形)选定的区域。我想我有所有必要的坐标，就像你在附件中看到的。

有人有任何想法/(算法，伪代码)，我如何使用javascript(FabricJS)解决它？

​

​

Answer 1

代码已经在对您的问题的注释中提供了。

但简单地说，你需要做的事情如下：

1. 在图像上画一个矩形(objectBeingCropped)
2. 使用函数objectBeingCropped.toDataURL()将blob/url格式的裁剪区域(图像上的矩形区域)导出到另一个图像对象的src。
3. 现在，在画布上使用src作为blob绘制新图像。