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

Question

我使用 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 = true;

  canvas.add(img);

  canvas.centerObject(img);

  currentImage = img;

  canvas.backgroundColor = "#333";

  addSelectionRect();

  canvas.setActiveObject(selectionRect);

  canvas.renderAll();
});

function addSelectionRect() {
  selectionRect = new fabric.Rect({
    fill: 'rgba(0,0,0,0.3)',
    originX: 'left',
    originY: 'top',
    stroke: 'black',
    opacity: 1,
    width: currentImage.width,
    height: currentImage.height,
    hasRotatingPoint: false,
    transparentCorners: false,
    cornerColor: 'white',
    cornerStrokeColor: 'black',
    borderColor: 'black',
  });

  selectionRect.scaleToWidth(300);
  canvas.centerObject(selectionRect);
  selectionRect.visible = true;
  canvas.add(selectionRect);
}

这是我的 jsfiddle： https: //jsfiddle.net/04nvdeb1/23/

Answer 1

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

所以sodo代码如下：

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

稍微调整一下你的小提琴来展示这个想法： https ://jsfiddle.net/tgy320w4/4/

希望这能有所帮助。