Fabric JS ClipPath：裁剪后如何使图像适合画布？

我使用 FabricJS 和 ClipPath 属性实现了图像裁剪。

问题是如何使裁剪后的图像适合画布？我希望裁剪后的图像填充画布区域，但不知道是否可以使用 Fabric js 来完成。

因此，我希望用户单击“裁剪”按钮后图像的选定部分适合画布大小：

关于代码：我在画布上绘制一个矩形，用户可以调整其大小并移动它。之后，用户可以单击“裁剪”按钮并获得裁剪后的图像。但裁剪后的部分保持与原始图像相同的大小，而我希望它能够缩放并适合画布。

Note：我尝试使用诸如scaleToWidth之类的方法。此外，我使用absolutePositioned 将选择矩形设置为true。我尝试将此属性设置为 false 来缩放图像，但没有帮助。

我也遇到了同样的问题几天。但我找不到任何解决方案，即使我也发现了你的SO问题和github问题。我认为 ClipPath 是使用漂亮的可调节麝香剪辑图像的最佳选择。

演示链接 https://shajal-kumer.github.io/crop-image-using-fabric.js/

Github 存储库链接 https://github.com/shajal-kumer/crop-image-using-fabric.js

在按钮回调函数中，你必须这样实现

第 1 步：首先您必须创建一个 Image 实例来保存裁剪后的图像

let cropped = new Image();

步骤 2：您必须使用 Canvas.toDataURL() 将 canvas 元素导出到 dataurl 图像。这里只想导出选择矩形或遮罩矩形，因此我们传递桅杆矩形的左、上、宽度和高度

cropped.src = canvas.toDataURL({
                    left: rect.left,
                    top: rect.top,
                    width: rect.width,
                    height: rect.height,
                });

第三步：在图像加载后的最后一步，我们清除画布。使用裁剪后的图像创建新对象，并设置一些选项并重新渲染画布

cropped.onload = function () {
                    canvas.clear();
                    image = new fabric.Image(cropped);
                    image.left = rect.left;
                    image.top = rect.top;
                    image.setCoords();
                    canvas.add(image);
                    canvas.renderAll();
                };

我实际上已经标记了使用 FabricJs 的裁剪功能 https://stackoverflow.com/questions/18732876/crop-functionality-using-fabricjs#soution2 解决你的问题。