Объединить несколько структур imageData в один холст

Я использую 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.минута.js: 29 Uncaught TypeError: не удалось выполнить ‘drawImage’ на ‘CanvasRenderingContext2D’: предоставленное значение не имеет типа ‘ (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);

и холст сохраняет, но я вижу только последнюю сохраненную картину. Почему?

1 ответ

  1. var c2 = layer.getCanvas(); — холст здесь не родной холст, это Konva wrapper. Таким образом, у вас есть ошибка, почему вы пытаетесь нарисовать его.

    Для получения ссылки на native canvas можно использовать: var c2 = layer.getCanvas()._canvas;.