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

我正在使用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未捕获的TypeError：无法在'CanvasRenderingContext2D'上执行'drawImage'：提供的值不是'（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或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);

和画布保存，但我只能看到最后保存的图片。为什么？

最佳答案

var c2 = layer.getCanvas();-这里的画布不是本机画布，它是Konva包装器。所以您有一个错误为什么要尝试绘制它。

要获取对本机画布的引用，可以使用：var c2 = layer.getCanvas()._canvas;。