使用FabricJS進行像素操作

Question

我使用FabricJS v1.5.0，並且在畫布上逐像素操作時出現問題。

this.canvas = new this.fabric.Canvas('canvas'); 
let imageData = this.canvas.contextContainer.getImageData(0, 0, this.canvas.getWidth(), this.canvas.getHeight()); 
//here a changed imageData 

this.canvas.contextContainer.putImageData(imageData, 0, 0); 
//data seted in canvas. 

let imageAdd = new this.fabric.Image(image, { 
      left: 100, 
      top: 100, 
      width: 100, 
      height: 100 
     }); 
this.canvas.add(imageAdd).setActiveObject(imageAdd); 
//in this moment, the canvas don't have more the imageData setted 

爲什麼要添加圖像清晰imageData？我需要將FabricJS對象中的imageData轉換爲在canvas中添加？

Answer 1

是的，我認爲你需要把你的圖像數據轉換成一個fabricjs圖像。當你需要恢復畫布從它的保存狀態

var dataUrl; 
.... 
// Save canvas state 
dataUrl = canvas.toDataURL() 

// Make changes to the canvas 

然後：

var img = fabric.Image.fromURL(dataUrl, function (i) { 
    canvas.clear(); 
    canvas.add(i); 
    canvas.renderAll(); 
}); 

然後，您應該能夠添加其他當你需要保存畫布的狀態，你可以這樣做圖像像以前一樣。