CanvasRenderingContext2D.getImageData()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CanvasRenderingContext2D.getImageData() - метод Canvas 2D API, возвращает объект ImageData, представляющий базовые пиксельные данные для области холста, обозначенного прямоугольником, который начинается в точке (sx, sy) и имеет ширину sw и высоту sh.

Синтаксис

ImageData ctx.getImageData(sx, sy, sw, sh);

Параметры

sx

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

sy

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

sw

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

sh

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

Возвращаемое значение

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

Выбрасываемые ошибки

IndexSizeError

Выбрасывает, если аргумент высоты или ширины равен нулю.

SecurityError

The canvas contains or may contain pixels which were loaded from an origin other than the one from which the document itself was loaded. To avoid SecurityError being thrown in this situation, configure CORS to allow the source image to be used in this way. See Allowing cross-origin use of images and canvas.

Примеры

Getting image data from a canvas

This example draws a rectangle, and then uses getImageData() to grab a portion of the canvas.

HTML

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

JavaScript

The object retrieved by getImageData() has a width of 200 and a height of 100, for a total of 20,000 pixels. Of those pixels, most are either transparent or taken from off the canvas; only 5,000 of them are opaque black (the color of the drawn rectangle).

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();

let imageData = ctx.getImageData(60, 60, 200, 100);
ctx.putImageData(imageData, 150, 10);

Result

Спецификации

Specification
HTML
# dom-context-2d-getimagedata-dev

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getImageData

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Смотрите также