putImageData()¶

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

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

Синтаксис¶

context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

Значения¶

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

Спецификация¶

HTML Living Standard

Пример¶

Следующий код копирует пиксельные данные заданной прямоугольной области на холсте при помощи метода 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)
}

Ссылки¶

Метод putImageData() ^{MDN (рус.)}