CanvasRenderingContext2D: метод getImageData()

Метод CanvasRenderingContext2D API холста 2D возвращает объект ImageData, представляющий данные пикселей для заданной части холста.

Этот метод не зависит от матрицы преобразования холста. Если заданный прямоугольник выходит за пределы холста, пиксели за пределами холста будут прозрачными черными в возвращаемом объекте ImageData.

Дополнительную информацию о getImageData() и общем манипулировании содержимым холста см. в разделе Манипулирование пикселями с помощью холста.

sx

Координата x левого верхнего угла прямоугольника, из которого будут извлечены ImageData.

sy

Координата y левого верхнего угла прямоугольника, из которого будут извлечены ImageData.

sw

Ширина прямоугольника, из которого будут извлечены ImageData. Положительные значения - вправо, отрицательные - влево.

sh

Высота прямоугольника, из которого будут извлечены ImageData. Положительные значения - вниз, отрицательные - вверх.

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

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

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

Объект ImageData с данными изображения для прямоугольника холста. Координаты левого верхнего угла прямоугольника — (sx, sy), а координаты правого нижнего угла — (sx + sw - 1, sy + sh - 1).

IndexSizeError DOMException

Выбрасывается, если sw или sh равны нулю.

SecurityError DOMException

Холст содержит или может содержать пиксели, загруженные из источника, отличного от источника загрузки самого документа. Чтобы избежать выброса SecurityError DOMException в этой ситуации, настройте CORS, чтобы разрешить использование исходного изображения таким образом. См. Разрешение использования изображений и холста из другого источника.

В этом примере рисуется изображение, а затем используется getImageData() для получения части холста.

Мы используем getImageData() для извлечения части изображения, начиная с (10, 20), шириной 80 и высотой 230. Затем мы рисуем этот фрагмент три раза, размещая фрагменты последовательно ниже и правее последнего фрагмента.

HTML

<canvas id="canvas" width="700" height="400"></canvas>

JavaScript

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

const image = new Image();
image.src = "plumeria.jpg";
image.addEventListener("load", () => {
  ctx.drawImage(image, 0, 0, 233, 320);

  const imageData = ctx.getImageData(10, 20, 80, 230);
  ctx.putImageData(imageData, 260, 0);
  ctx.putImageData(imageData, 380, 50);
  ctx.putImageData(imageData, 500, 100);
});

Результат

Необязательное свойство colorSpace позволяет получить данные изображения в нужном формате.

const context = canvas.getContext("2d", { colorSpace: "display-p3" });
context.fillStyle = "color(display-p3 0.5 0 0)";
context.fillRect(0, 0, 10, 10);

// Get ImageData converted to sRGB
const imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "srgb" });
console.log(imageData.colorSpace); // "srgb"

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• Объект ImageData
• CanvasRenderingContext2D.putImageData()
• Манипулирование пикселями с помощью холста