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以在画布中添加吗？

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

接受的答案不正确。

您不需要将图片转换为fabricJs对象，以便能够将该图片添加到布料的画布中。

您需要了解的是，image实际上是图像对象，因为fabric.Image()需要您的图像对象。

如果它是您图片的网址或Blob格式（我猜是这样），您需要使用fabric.Image.fromURL()并提供图片的src而不是整个图片对象。

使用FabricJS进行像素操作

2 个答案: