JS: getImageData / putImageData как скопировать изображение?

Question

[webinside]

Нужно скопировать часть изображения из другого ( которое берется с камеры, но это не важно, хотя нет, важно потому, что с камерой мне приходится работать в firefox)
Делаю 2 канваса:

<canvas id="canvas" width="320" height="240" ></canvas>
<canvas class="target" id="m0"  width="320" height="240"></canvas>

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var cms = document.getElementById('m0');
var target = cms.getContext('2d');

В context все поступает с камеры замечательно.
Нужно выдрать из него кусочек.. например [0, 0, 10, 10], context разумеется больше.

context.drawImage(video, 0, 0, canvas.width, canvas.height); // тут все работает.
var data = context.getImageData(0, 0, 320, 240).data; // в data попадает одномерный массив.
target.putImageData(data,0,0,10,10); // фигушки.

Выскакивает ошибка:
TypeError: Not enough arguments to CanvasRenderingContext2D.putImageData.

https://jsfiddle.net/gsdLxxz5/

Answer 1

[Сергей Соколов]

у putImageData() две сигнатуры: 3 аргумента или 7 аргументов:

ctx.putImageData(imagedata, dx, dy);
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

выдрать из него кусочек.. например [0, 0, 10, 10]

var pixels = context.getImageData(0, 0, 320, 240);
var data = pixels.data; // в data попадает одномерный массив.
target.putImageData( pixels, 15, 15, 0, 0, 10, 10);
/*
15, 15 – где разместить (отступив по 15px слева сверху в target'е)
0, 0 – откуда копировать в координатах context'а
10, 10 – ширина, высота региона копирования
*/

Comments

[webinside]

Все тот же
Argument 1 of CanvasRenderingContext2D.putImageData does not implement interface ImageData.
:(

[Сергей Соколов]

webinside: а, туда надо пихать не «одномерный массив», а его родителя:

var pixels = context.getImageData(0, 0, 320, 240);
var data = pixels.data; // в data попадает одномерный массив.
// ...
target.putImageData( pixels,15,15,0,0,10,10);

Т.е. если вы никак не манипулируете цветами/пикселями, .data вам и не нужен.

[webinside]

Спасибо огромное. Все заработало!