HTML-холст Метод putImageData()

Пример

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

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.

Method
putImageData()	Yes	9.0	Yes	Yes	Yes

Определение и использование

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

Совет: прочитайте о методе getImageData() , который копирует пиксельные данные для указанного прямоугольника на холсте.

Совет: прочтите о методе createImageData() , который создает новый пустой объект ImageData.

Синтаксис JavaScript

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

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

Parameter	Description
imgData	Specifies the ImageData object to put back onto the canvas
x	The x-coordinate, in pixels, of the upper-left corner of the ImageData object
y	The y-coordinate, in pixels, of the upper-left corner of the ImageData object
dirtyX	Optional. The horizontal (x) value, in pixels, where to place the image on the canvas
dirtyY	Optional. The vertical (y) value, in pixels, where to place the image on the canvas
dirtyWidth	Optional. The width to use to draw the image on the canvas
dirtyHeight	Optional. The height to use to draw the image on the canvas

❮ Справочник по холсту HTML