相关疑难解决方法(0)

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

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

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

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

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

请不要建议使用cropX 和cropY 属性代替clipPath 进行裁剪，因为它们不适用于旋转图像。

HTML：

<button>Crop</button>
<canvas id="canvas" width="500" height="500"></canvas>

JS：

// crop button
var button = $("button");

// handle click
button.on("click", function(){

  let rect = new fabric.Rect({
    left: selectionRect.left,
    top: selectionRect.top,
    width: selectionRect.getScaledWidth(),
    height: selectionRect.getScaledHeight(),
    absolutePositioned: true
  });

  currentImage.clipPath = rect;

  canvas.remove(selectionRect);

  canvas.renderAll();
});

var canvas = new fabric.Canvas('canvas');

canvas.preserveObjectStacking = true;

var selectionRect;
var currentImage;

fabric.Image.fromURL('https://www.sheffield.ac.uk/polopoly_fs/1.512509!/image/DiamondBasement.jpg', img => {
  img.scaleToHeight(500);

  img.selectable = …