fabricjs將剪切後的對象設置爲剪貼後的背景

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

在這裏，我可以easyly夾畫布與我給出的左，上，寬度和高度，但我得到相同的畫布修剪修剪部分，除去與另一種顏色的一部分。但剪切後，我希望剪切的部分在畫布上繪製或將剪切的部分設置爲背景。

我該怎麼做？

Answer 1

其實你裁剪了畫布的渲染。

爲了節省您必須使用Canvas.toDataURL() method裁剪區域，你可以看到有參數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"}) 
}