ImageData: свойство data

Только для чтения ImageData.data свойство возвращает Uint8ClampedArray, который содержит данные пикселей объекта ImageData. Данные хранятся в одномерном массиве в порядке RGBA, со значениями целых чисел между 0 и 255 (включительно).

A Uint8ClampedArray.

В этом примере создается объект ImageData, который имеет ширину 100 пикселей и высоту 100 пикселей, что составляет 10 000 пикселей в общей сложности. Массив data хранит четыре значения для каждого пикселя, что составляет 4 x 10 000 или 40 000 значений в общей сложности.

let imageData = new ImageData(100, 100);
console.log(imageData.data); // Uint8ClampedArray[40000]
console.log(imageData.data.length); // 40000

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

HTML

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

JavaScript

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

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

// Fill the array with RGBA values
for (let i = 0; i < imageData.data.length; i += 4) {
  // Percentage in the x direction, times 255
  let x = ((i % 400) / 400) * 255;
  // Percentage in the y direction, times 255
  let y = (Math.ceil(i / 400) / 100) * 255;

  // Modify pixel data
  imageData.data[i + 0] = x; // R value
  imageData.data[i + 1] = y; // G value
  imageData.data[i + 2] = 255 - x; // B value
  imageData.data[i + 3] = 255; // A value
}

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

Результат

Для получения дополнительных примеров с использованием ImageData.data, см. Обработка пикселей с помощью холста, CanvasRenderingContext2D.createImageData() и CanvasRenderingContext2D.putImageData().

• ImageData.height
• ImageData.width
• ImageData
• CanvasRenderingContext2D.createImageData()
• CanvasRenderingContext2D.putImageData()
• Обработка пикселей с помощью холста