使用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

为什么添加image clear imageData?我需要转换imageData在FabricJS对象添加在画布?

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

您应该能够像以前一样添加其他图像。

Answer 2

您需要找出的是您的image是否实际上是一个图像对象，因为fabric.Image()需要您的图像对象。

如果它是您的图像的URL或Blob格式(我猜它是)，您需要使用fabric.Image.fromURL()并提供图像的src，而不是整个图像对象。

下面是一个如何创建fabric实例的示例。来自URL字符串的图像

fabric.Image.fromURL(link, function(img) {
    img.set({
        id : 'someId',
        width : canvas.width / 2,
        height : canvas.height / 2
    });
    canvas.add(img).renderAll().setActiveObject(img);
});