CanvasRenderingContext2D.getImageData()

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

<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).

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

 

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

Спецификация Статус Комментарий
HTML Living Standard
Определение 'CanvasRenderingContext2D.getImageData' в этой спецификации.
Живой стандарт  

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
getImageDataChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка Да
Полная поддержка Да
Полная поддержка 5
Замечания
Замечания getImageData now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black and now also returns at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка Да
Полная поддержка Да
Полная поддержка 5
Замечания
Замечания getImageData now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black and now also returns at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

 

См также

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: boxa6, mdnwebdocs-bot, Faik-man
Обновлялась последний раз: boxa6,