Метод Canvas putImageData()

Руководство по Canvas

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

putImageData() Метод возвращает изображение на канвас (из указанного объекта ImageData).

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

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

Пример

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 50, 50);
function copy()
{
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}

Попробуйте сами

Синтаксис

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

Значение параметра

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

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

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Комментарий:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

Руководство по Canvas