Пиксельная манипуляция с 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 

Зачем добавить изображение clear imageData? Мне нужно преобразовать imageData в FabricJS Object, чтобы добавить в холст?

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(); 
}); 

Затем вы должны иметь возможность добавлять другие как и раньше.