1

我正在使用 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?我需要转换 FabricJS 对象中的 imageData 以添加到画布中吗?

4

2 回答 2

2

是的,我认为您确实需要将图像数据转换为 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();
});

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

于 2016-11-03T15:01:17.790 回答
1

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

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

这是一个关于如何从 URL 字符串创建 fabric.Image 实例的示例

fabric.Image.fromURL(link, function(img) {
    img.set({
        id : 'someId',
        width : canvas.width / 2,
        height : canvas.height / 2
    });
    canvas.add(img).renderAll().setActiveObject(img);
});
于 2018-04-22T10:18:33.600 回答