webinside
@webinside

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

Нужно скопировать часть изображения из другого ( которое берется с камеры, но это не важно, хотя нет, важно потому, что с камерой мне приходится работать в 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/
  • Вопрос задан
  • 903 просмотра
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
у 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 – ширина, высота региона копирования
*/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы