Пиксельные манипуляции с 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 Object, чтобы добавить в холст?

Answer 1

Да, я думаю, вам нужно превратить данные вашего изображения в изображение фабрики. Когда вам нужно сохранить состояние холста, вы можете сделать это:

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

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

Answer 2

Принятый ответ неверен.

Вам не нужно конвертировать ваше изображение в объект fabricJs, чтобы иметь возможность добавить это изображение на холст ткани.

Что вам нужно выяснить, если ваш image на самом деле объект изображения, потому что fabric.Image() нужен ваш объект изображения.

Если это изображение в формате URL или Blob вашего изображения (что, я думаю, так и есть), вам нужно использовать fabric.Image.fromURL() и предоставить src изображения не весь объект изображения.