Javascript метод putImageData()

Метод putImageData() помещает данные изображения (из заданного объекта ImageData) обратно на холст.

Примечание: Чтобы скопировать пиксельные данные заданной прямоугольной области на холсте, используется метод getImageData(). Для создания нового, пустого объекта ImageData, используется метод createImageData().

JavaScript синтаксис:context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

Значения параметров

ПараметрОписание
imgDataОпределяет возвращаемый на холст объект ImageData
xКоордината X, в пикселях, верхнего левого угла объекта ImageData
yКоордината Y, в пикселях, верхнего левого угла объекта ImageData
dirtyXНеобязательный параметр. Горизонтальное (x) значение, в пикселях, куда поместить изображение на холсте
dirtyYНеобязательный параметр. Вертикальное (y) значение, в пикселях, куда поместить изображение на холсте
dirtyWidthНеобязательный параметр. Ширина, используемая, чтобы нарисовать изображения
dirtyHeightНеобязательный параметр. Высота, используемая, чтобы нарисовать изображения

Пример использования

Следующий код копирует пиксельные данные заданной прямоугольной области на холсте при помощи метода getImageData(), а затем помещает эти данные изображения обратно на холст при помощи метода putImageData():


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

function copy()
{
 var imgData=ctx.getImageData(10,10,50,50);
 ctx.putImageData(imgData,10,70);
}