1

我正在使用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结构合并为一个，但我做不到。使用这个答案我尝试这样做，但总是得到：

konva.min.js:29 未捕获的类型错误：无法在“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);

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

4

1 回答 1

0

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

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

于 2017-01-17T11:54:10.833 回答