CanvasRenderingContext2D: метод createImageData()

Метод CanvasRenderingContext2D.createImageData() API 2D-канала холста создаёт новый, пустой объект ImageData с указанными размерами. Все пиксели в новом объекте — прозрачный чёрный цвет.

width

Ширина нового объекта ImageData. Отрицательное значение переворачивает прямоугольник относительно вертикальной оси.

height

Высота нового объекта ImageData. Отрицательное значение переворачивает прямоугольник относительно горизонтальной оси.

settings Необязательно

Объект со следующими свойствами:

• colorSpace: Указывает цветовое пространство изображения. Может быть установлено в "srgb" для цветового пространства sRGB или "display-p3" для цветового пространства display-p3.

imagedata

Существующий объект ImageData , из которого следует скопировать ширину и высоту. Само изображение не копируется.

Новый объект ImageData с указанной шириной и высотой. Новый объект заполняется прозрачными чёрными пикселями.

IndexSizeError DOMException

Выбрасывается, если любой из аргументов width или height равен нулю.

Этот фрагмент создаёт пустой объект ImageData с помощью метода createImageData().

<canvas id="canvas"></canvas>

Созданный объект имеет ширину 100 пикселей и высоту 50 пикселей, что в сумме составляет 5000 пикселей. Каждый пиксель в объекте ImageData состоит из четырёх значений массива, поэтому свойство data объекта имеет длину 4 × 5000, или 20000.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const imageData = ctx.createImageData(100, 50);
console.log(imageData);
// ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] }

В этом примере создаётся и заполняется новый объект ImageData фиолетовыми пикселями.

<canvas id="canvas"></canvas>

Так как каждый пиксель состоит из четырёх значений, цикл for увеличивает счётчик на четыре. Значения массива, связанные с каждым пикселем, это R (красный), G (зелёный), B (синий) и A (альфа) в указанном порядке.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);

// Iterate through every pixel
for (let i = 0; i < imageData.data.length; i += 4) {
  // Modify pixel data
  imageData.data[i + 0] = 190; // R value
  imageData.data[i + 1] = 0; // G value
  imageData.data[i + 2] = 210; // B value
  imageData.data[i + 3] = 255; // A value
}

// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);

Результат

Дополнительные примеры с использованием createImageData() и объекта ImageData можно найти в обработке пикселей с помощью холста и ImageData.data.

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• ImageData
• Манипулирование пикселями с помощью canvas