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

fabricjs set clipped object as background to canvas after clipping

本文关键字：裁剪 背景 对象 Fabricjs 设置      更新时间：2023-09-26

在我的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()方法，正如你可以看到的，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"})
}
相关文章：