fabricjs剪裁画布后获取图像将其设置为新的背景图像

时间:2016-10-17 11:55:31

标签: javascript canvas 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"})
}

在这里,我希望我的画布以裁剪区域作为背景图像返回。

需要帮助

0 个答案:

没有答案