我使用 FabricJS 和 clipPath 属性实现了图像裁剪。
问题是裁剪后如何使图像适合 Canvas ?我希望裁剪后的图像填充 Canvas 区域,但不知道是否可以使用 fabric js。
所以我希望在用户单击“裁剪”按钮后图像的选定部分适合 Canvas 大小:
关于代码:我在 Canvas 上画了一个矩形,用户可以调整它的大小和移动它。之后,用户可以单击“裁剪”按钮并获得裁剪后的图像。但是裁剪后的部分与原始图像上的大小保持相同,而我希望它可以缩放并适合 Canvas 。
注意:我尝试使用像 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/
最佳答案
这几天我也遇到了同样的问题。但是我找不到任何解决方案,即使我也发现了您的 SO 问题和 github 问题。我认为 clipPath 是使用漂亮的可调节 musk 剪切图像的最佳选择。
在按钮回调函数中,你必须这样实现
第 1 步:首先您必须创建一个 Image 实例来保存裁剪后的图像
let cropped = new Image();
第 2 步:您必须使用 Canvas.toDataURL() 将 canvas 元素导出到 dataurl 图像。这里只想导出选择矩形或蒙版矩形,所以我们传递了 mast rect left、top、width 和 height
cropped.src = canvas.toDataURL({
left: rect.left,
top: rect.top,
width: rect.width,
height: rect.height,
});
第 3 步:在加载图像后的最后一步,我们清除 Canvas 。使用我们裁剪的图像创建新对象,并设置一些选项并重新渲染 Canvas
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();
};
我实际上是 marged Crop Functionality using FabricJs #soution2 你的问题。
关于javascript - Fabric JS clipPath : how to fit the image to the canvas after cropping?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60816668/