使用FabricJS裁剪图像

Question

我想使用（javascript）FabricJS + HTML5画布裁剪图像。

• 画布的背景图像是Fabric图像对象。
• 作物区域 是FabricJS矩形。

我也附了一张图片。 （你可以看到我想要完成的事情） 是否可以以某种方式调整FabricJS画布的大小以仅保留由矩形选择的区域（绿色虚线矩形）。我认为我有所有必要的坐标，你可以在附件上看到。

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

Answer 1

您的问题的评论中已经提供了代码。

但简而言之，您需要做的事情如下所示：

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