Я использую Konvajs
framework для работы с 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 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);
to:
ctx.drawImage(c2._canvas, 0, 0);
и холст сохраняет, но я вижу только последнюю сохраненную картинку. Почему?