javascript - 将多个 imageData 结构合并到一张 Canvas 中

Question

我正在使用 Konvajs 框架来处理 canvas。我需要创建三个形状(槽)并进行一些操作。它可以工作，但我也需要处理像素，我通过 getImageData 获取图像，将其存储在内部结构中，然后用于操作。

var c = this.layer.getCanvas();
var ctx = c.getContext();
this.slots[name].data = ctx.getImageData(0, 0, this.stage.getWidth(), this.stage.getHeight());

当工作完成后，我想将这些 imageData 结构合并为一个，但我做不到。使用这个answer我尝试这样做，但总是得到:

konva.min.js:29 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

这是我的代码片段:

var c = layer.getCanvas();
var ctx = c.getContext(); 

for (var slot_name in this.slots) {
  console.log('Slot', slot_name);
  var slot_data = this.slots[slot_name].data;
  var c2 = layer.getCanvas();
  var ctx2 = c2.getContext();
  ctx2.putImageData(slot_data, 0, 0);
  ctx.drawImage(c2, 0, 0);
}
var imageData3 = c.toDataURL({pixelRatio: 1});
zip.file('scene.png', imageData3.substr(imageData3.indexOf(',') + 1), {base64: true});

我的错误在哪里？

更新:

更改行:

ctx.drawImage(c2, 0, 0);

至:

ctx.drawImage(c2._canvas, 0, 0);

Canvas 已保存，但我只看到最后保存的图片。为什么？

Answer 1

var c2 = layer.getCanvas(); - 这里的 Canvas 不是原生 Canvas ，它是 Konva 包装器。所以你尝试绘制它的原因是错误的。

要获取对 native Canvas 的引用，您可以使用:var c2 = layer.getCanvas()._canvas;。