将多个 imageData 结构组合到一个画布中答案

【问题标题】：Combine several imageData structures into one canvas将多个 imageData 结构组合到一个画布中
【发布时间】：2017-01-14 08:14:44
【问题描述】：

我正在使用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: 无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是类型“（HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap）”

这是我的sn-p代码：

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);

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

【问题讨论】：

标签： javascript html canvas konvajs

【解决方案1】：

var c2 = layer.getCanvas(); - 这里的画布不是原生画布，它是 Konva 包装器。因此，您尝试绘制它的原因有一个错误。

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

【讨论】：