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/

希望這會有所幫助。

Answer 2

我也遇到了同樣的問題幾天。 但是我找不到任何解決方案，即使我也找到了您的 SO 問題和 github 問題。 我認為 clipPath 是使用漂亮的可調節麝香剪裁圖像的最佳選擇。

演示鏈接

Github 回購鏈接

在按鈕回調函數中，你得像這樣實現

第 1 步：首先，您必須創建一個 Image 實例來保存裁剪后的圖像

let cropped = new Image();

第 2 步：您必須使用 Canvas.toDataURL() 將畫布元素導出到 dataurl 圖像。 這里wan想只導出選擇矩形或遮罩矩形，所以我們傳遞mast rect left, top, width, and height

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

我實際上使用 FabricJs #sotion2 對您的問題進行了裁剪功能。