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

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

要保存裁剪区域，您必须使用Canvas.toDataURL() method，因为您可以看到参数DECLARE @tv_Doc TABLE (ID INT NOT NULL,ReceiptId INT,SampleTypeId INT,StorageId INT, RackId INT, ShelfId INT,Box_Id INT,Project_Id INT,Matrix_Type_Id INT )只是使用与放入top, left, width, height相同的参数，它将返回一个表示字符串的字符串裁剪区域（base64编码）。

然后使用此字符串作为带有Canvas.setBackgrounsImage

的画布新背景图像

您的代码应如下所示：

ctx.rect(left, top, width, height)

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

1 个答案: