fabricjs在裁剪后将裁剪的对象设置为画布的背景 [英] fabricjs set clipped object as background to canvas after clipping

问题描述

在我的fabricjs中，我正在制作画布并向其中添加图像并将该图像设置为背景。然后我将木桶剪成一定的宽度和高度

In my fabricjs I am making a canvas and adding an image to it and setting the image as background. and then I am clipping the cavas to some width and height.

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

After I clip the canvas I want a new canvas or same canvas with clipped area as background all covering the canvas with its width and height or can make new canvas with clipped area's height and width

当前我正在这样做。

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

在这里，我可以很容易地用给定的左侧，顶部，宽度和高度来裁剪画布，但是我得到的是相同的画布剪掉一部分并用另一种颜色去除部分。但是在修剪之后，我希望修剪的部分在画布上绘制或将修剪的部分设置为背景。

Here I can easyly clip the canvas with my given left, top, width and height but I am getting the same canvas with clipped clipped part and removed part with another color. But after clipping I want the clipped part to paint over canvas or set clipped part as background.

我该怎么做??

推荐答案

实际上画布的渲染。

要保存裁剪区域，您必须使用 Canvas.toDataURL（）方法，如您所见，有参数 top，left，width，height 只需使用与 ctx.rect（left，top，width，height）相同的内容，它将返回一个表示裁剪区域的字符串（base64编码）。

To save the cropped area you must use Canvas.toDataURL() method, as you can see there is parameters top, left, width, height just use the same as you put into ctx.rect(left, top, width, height) and it will returns you a string representing the cropped area (base64 encoded).

然后将该字符串用作 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"})
}

这篇关于fabricjs在裁剪后将裁剪的对象设置为画布的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！