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：无法执行＆＃39; drawImage＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：提供的值不是＆＃39;（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap）＆＃39;

这是我的代码片段：

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

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

Answer 1

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

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

将多个imageData结构合并到一个画布

1 个答案: