fabricjs在剪裁后将剪裁对象设置为画布的背景

Question

在我的fabricjs中，我制作了一张画布，在画布上添加了一幅图像，并将图像设置为背景。然后我把卡瓦什剪到一定的宽度和高度。

剪辑完画布后，我想要一个新的画布或相同的画布，以剪裁区域作为背景，所有画布都以其宽度和高度覆盖画布，或者可以制作具有剪裁区域高度和宽度的新画布

目前我正在做这件事。。

function crop(url, name, left, top, width, height, callback) {
    var c = document.createElement('canvas')
    var id = "canvas_" + name
    c.id = id
    var canvas = new fabric.Canvas(id)

    fabric.Image.fromURL(url, function(oImg) {

        oImg.set({
            selectable:false,
        })
        canvas.setDimensions({width:oImg.width, height:oImg.height})
        canvas.add(oImg)
        canvas.clipTo = function (ctx) {
            ctx.rect(left, top, width, height)
            console.log(ctx)
        };
        canvas.centerObject(oImg)
        canvas.renderAll()
        var img = canvas.toDataURL('image/png')
        console.log(img)
        callback(img)
    }, {crossOrigin: "Anonymous"})
}

在这里，我可以轻松地剪辑画布与我给定的左，顶，宽度和高度，但我得到了相同的画布与剪辑部分和删除部分与另一种颜色。但在剪辑后，我希望剪辑的部分画在画布上或设置剪辑的部分作为背景。

我该怎么做？？

Answer 1

实际上，您裁剪了画布的渲染。

要保存裁剪区域，必须使用画布。toDataURL（）方法，正如您所看到的，有参数top、left、width、height，只需使用与放入ctx相同的参数即可。rect（left、top、width、height）并返回一个表示裁剪区域的字符串（base64编码）。

然后使用这个字符串作为你的画布新的背景图像与Canvas.setBackgrounsImage

您的代码应该看起来像：

function crop(url, name, left, top, width, height, callback) {
    var c = document.createElement('canvas')
    var id = "canvas_" + name
    c.id = id
    var canvas = new fabric.Canvas(id)

    fabric.Image.fromURL(url, function(oImg) {

        oImg.set({
            selectable:false,
        })
        canvas.setDimensions({width:oImg.width, height:oImg.height})
        canvas.add(oImg)
        canvas.centerObject(oImg)
        canvas.renderAll()
        var img = canvas.toDataURL({
                      format: 'image/png',
                      left: left,
                      right: right,
                      width: width,
                      height: height
                  })
        console.log(img)
        canvas.setBackgroundImage(img)
        callback(img)
    }, {crossOrigin: "Anonymous"})
}