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

在我的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"})
}

在这里，我可以轻松地用给定的左侧、顶部、宽度和高度来剪辑画布，但我得到了相同的画布，其中剪辑的剪辑部分和删除的部分具有另一种颜色。但在剪辑后，我希望将剪辑的部分绘制在画布上或将剪辑的部分设置为背景。

我怎样才能做到这一点 ？？

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

要保存裁剪区域，您必须使用Canvas.toDataURL() 方法 http://fabricjs.com/docs/fabric.Canvas.html#toDataURL，如你所见，有参数top, left, width, height只需使用与您输入相同的内容即可ctx.rect(left, top, width, height)它会返回一个表示裁剪区域的字符串（base64 编码）。

然后使用这个字符串作为画布的新背景图像Canvas.setBackgroundImage http://fabricjs.com/docs/fabric.Canvas.html#setBackgroundImage

您的代码应如下所示：

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"})
}