使用 FabricJS 进行像素操作

Question

我正在使用 FabricJS v1.5.0，在 canvas 上逐像素操作时遇到问题。

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 以添加 canvas?

Answer 1

是的，我认为您确实需要将图像数据转换为 fabricjs 图像。当你需要保存 canvas 的状态时，你可以这样做：

var dataUrl;
....
// Save canvas state
dataUrl = canvas.toDataURL()

// Make changes to the canvas

然后当您需要从 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 而不是整个图片对象。

这是一个关于如何从 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);
});

使用 FabricJS 进行像素操作

Pixel manipulation with FabricJS

javascript

pixel-manipulation

html5-canvas

fabricjs