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

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

问题是如何在裁剪后使图像适合画布？我希望裁剪后的图像填充画布区域，但无法确定是否可以使用fabric js

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

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

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

请不要建议使用cropX和cropY属性进行裁剪，而不要使用clipPath，因为它们对旋转图像不起作用

HTML:

---

这是我的JSFIDLE:

实际上，您不必使用clipPath方法。您需要的是将所需区域移动到角落，并更改画布的大小

因此，sodo代码如下所示：

fabricCanvas.setDimensions({
    width: cropRectObject.getScaledWidth(),
    height: cropRectObject.getScaledHeight()
})
imageObject.set({
    left: -cropRectObject.left,
    top: -cropRectObject.top
})
fabricCanvas.remove(cropRectObject);

稍微调整一下你的小提琴来展示这个想法：

---

希望这能有所帮助。

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

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

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

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,
                });

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

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();
                };

---

实际上，我把你的问题写在了第二页。

剪辑区域必须是绝对的吗？还是你试过了？您希望图像与剪辑区域相比是可移动的吗？@AndreaBogazzi，谢谢您的关注！裁剪面积不必是绝对的，我想我把它变成绝对的是为了简化计算。理想情况下，当图像移动时，剪裁区域应“固定”到图像。另外，我需要有一个函数来旋转图像，所以剪辑也应该与旋转的图像一起工作。剪辑也与旋转的图像一起工作，只是你反向旋转剪辑区域。

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();
                };