Question

如何使用fabric.js在画布上加载的图像上实现裁剪工具？我在画布上加载了一个图像。现在我想实现裁剪工具，允许用户裁剪图像并在完成后将其重新加载到画布上。

Answer 1

摘要

设置el.selectable = false
使用鼠标事件在其上绘制一个矩形
获取矩形左/顶部和宽度/高度
然后使用以下功能

对不起，让我解释一下。 ctx.rect将从对象的中心点裁剪图像。此外，还应考虑scaleX因素。

x = select_el.left - object.left;
y = select_el.top - object.top;

x *= 1 / scale;
y *= 1 / scale;

width = select_el.width * 1 / scale;
heigh = select_el.height * 1 / scale;

object.clipTo = function (ctx) {
    ctx.rect (x, y, width, height);
}

完整示例：http://jsfiddle.net/hellomaya/kNEaX/1/

并查看此http://jsfiddle.net/hellomaya/hzqrM/以生成选择框。 Fabric活动的参考：https://github.com/kangax/fabric.js/wiki/Working-with-events

Answer 2

（这个答案是对Tom's答案中的小提琴的一次迭代。谢谢你，汤姆，让我走下去。）

您可以使用fabric.Object.clipTo()或fabric.Object.toDataURL()裁剪Fabric.js。 clipTo()方法保留原始图像并通过蒙版显示裁剪。 toDataURL()方法会创建一个新图像。

我的完整示例使用clipTo()方法。我在最后显示了一小部分代码，显示了toDataURL()方法。

解决方案1 

摘要

准备一个不可见的矩形。当用户点击并在画布上拖动鼠标时绘制它。
当用户释放鼠标时，剪切基础图像

与Tom的回答不同

在汤姆的回答中，有一些我想改变的小事。所以在我的例子中差异是

裁剪框从左到右，从右到左（汤姆的作品从右到左）
您有多次机会绘制裁剪框（尝试在Tom的原因框中重新绘制裁剪框以跳转）
适用于Fabric.js v1.5.0
少量代码。

守则

＆＃13;

 // set to the event when the user pressed the mouse button down
var mouseDown;
// only allow one crop. turn it off after that
var disabled = false;
var rectangle = new fabric.Rect({
    fill: 'transparent',
    stroke: '#ccc',
    strokeDashArray: [2, 2],
    visible: false
});
var container = document.getElementById('canvas').getBoundingClientRect();
var canvas = new fabric.Canvas('canvas');
canvas.add(rectangle);
var image;
fabric.util.loadImage("http://fabricjs.com/lib/pug.jpg", function(img) {
    image = new fabric.Image(img);
    image.selectable = false;
    canvas.setWidth(image.getWidth());
    canvas.setHeight(image.getHeight());
    canvas.add(image);
    canvas.centerObject(image);
    canvas.renderAll();
});
// capture the event when the user clicks the mouse button down
canvas.on("mouse:down", function(event) {
    if(!disabled) {
        rectangle.width = 2;
        rectangle.height = 2;
        rectangle.left = event.e.pageX - container.left;
        rectangle.top = event.e.pageY - container.top;
        rectangle.visible = true;
        mouseDown = event.e;
        canvas.bringToFront(rectangle);
    }
});
// draw the rectangle as the mouse is moved after a down click
canvas.on("mouse:move", function(event) {
    if(mouseDown && !disabled) {
        rectangle.width = event.e.pageX - mouseDown.pageX;
        rectangle.height = event.e.pageY - mouseDown.pageY;
        canvas.renderAll();
    }
});
// when mouse click is released, end cropping mode
canvas.on("mouse:up", function() {
    mouseDown = null;
});
$('#cropB').on('click', function() {
    image.clipTo = function(ctx) {
        // origin is the center of the image
        var x = rectangle.left - image.getWidth() / 2;
        var y = rectangle.top - image.getHeight() / 2;
        ctx.rect(x, y, rectangle.width, rectangle.height);
    };
    image.selectable = true;
    disabled = true;
    rectangle.visible = false;
    canvas.renderAll();
});

＆＃13;

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" type="text/javascript"></script>
</head>
<body>
<canvas style="border: 1px solid black" id="canvas"></canvas>
<button id=cropB>crop</button>
</body>

＆＃13;

解决方案2

或者，我们可以使用clipTo()生成新图片，而不是像上面那样使用toDataURL()。像这样的东西

$('#cropB').on('click', function() {
    image.selectable = true;
    disabled = true;
    rectangle.visible = false;
    var cropped = new Image();
    cropped.src = canvas.toDataURL({
        left: rectangle.left,
        top: rectangle.top,
        width: rectangle.width,
        height: rectangle.height
    });
    cropped.onload = function() {
        canvas.clear();
        image = new fabric.Image(cropped);
        image.left = rectangle.left;
        image.top = rectangle.top;
        image.setCoords();
        canvas.add(image);
        canvas.renderAll();
    };
});

Answer 3

我使用最新的Fabric js版本开发了轻松快捷的图像裁剪功能 https://github.com/kpomservices/Fabric-JS-Image-CROP

演示：http://kpomservices.com/imagecropdemo/index.html

我用crompx来维护作物。

使用FabricJs进行裁剪功能

3 个答案: