From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../getimagedata/index.html | 108 +++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html (limited to 'files/ru/web/api/canvasrenderingcontext2d/getimagedata') diff --git a/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html new file mode 100644 index 0000000000..879efff5f0 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -0,0 +1,108 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +tags: + - API + - Canvas + - Method +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +
{{APIRef}}
+ +

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

+ +

Синтаксис

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

Параметры

+ +
+
sx
+
Координата x верхнего левого угла прямоугольника, из которого будет извлечен ImageData.
+
sy
+
Координата y верхнего левого угла прямоугольника, из которого будет извлечен ImageData.
+
sw
+
Ширина прямоугольника, из которого будет извлечен ImageData.
+
sh
+
Высота прямоугольника, из которого будет извлечен ImageData.
+
+ +

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

+ +

Объект {{domxref("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

+ +

{{EmbedLiveSample("Getting_image_data_from_a_canvas", 700, 180)}}

+ +

 

+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}} 
+ +

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

+ + + +

{{Compat("api.CanvasRenderingContext2D.getImageData")}}

+ +

 

+ +

См также

+ + -- cgit v1.2.3-54-g00ecf