使用 FabricJS 裁剪图像

Posted 2023-03-25

【中文标题】使用 FabricJS 裁剪图像

【英文标题】：Crop an image using FabricJS

【发布时间】：2016-05-25 13:13:39

【问题描述】：

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

画布的背景图像是一个织物图像对象。 作物面积 是一个 FabricJS 矩形。

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

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

【问题讨论】：

***.com/questions/18732876/…

【参考方案1】：

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

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

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