Fabric JS clipPath：裁剪后如何将图像适配到画布上？ [英] Fabric JS clipPath: how to fit the image to the canvas after cropping?

问题描述

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

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

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

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

注意：我尝试使用scaleToWidth等方法。此外，我还为选择矩形使用了设置为True的绝对位置。我尝试在此属性设置为False的情况下缩放到图像，但无济于事。

请不要建议使用cropX和cropY属性进行裁剪，因为它们不能正常用于旋转图像。

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/

推荐答案

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

Demo Link

Github Repo Link

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

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

let cropped = new Image();

步骤2：您必须使用Canvar.toDataURL()将画布元素导出到dataurl图像。这里我们只想导出选择矩形或遮罩矩形，因此我们传递主矩形Left、Top、Width和Height

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

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

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

我实际上已将您的问题标记为Crop Functionality using FabricJs#Soution2。

这篇关于Fabric JS clipPath：裁剪后如何将图像适配到画布上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！