1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
---
title: CanvasRenderingContext2D.getImageData()
slug: Web/API/CanvasRenderingContext2D/getImageData
tags:
- API
- Canvas
- Method
translation_of: Web/API/CanvasRenderingContext2D/getImageData
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData() </code></strong><code>-</code> метод Canvas 2D API, возвращает объект {{domxref("ImageData")}}, представляющий базовые пиксельные данные для области холста, обозначенного прямоугольником, который начинается в точке <em>(sx, sy)</em> и имеет ширину <em>sw</em> и высоту <em>sh</em>.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var>
</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><code>sx</code></dt>
<dd>Координата x верхнего левого угла прямоугольника, из которого будет извлечен ImageData.</dd>
<dt><code>sy</code></dt>
<dd>Координата y верхнего левого угла прямоугольника, из которого будет извлечен ImageData.</dd>
<dt><code>sw</code></dt>
<dd>Ширина прямоугольника, из которого будет извлечен ImageData.</dd>
<dt><code>sh</code></dt>
<dd>Высота прямоугольника, из которого будет извлечен ImageData.</dd>
</dl>
<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
<p>Объект {{domxref("ImageData")}}, содержащий данные изображения для данного прямоугольника холста.</p>
<h3 id="Выбрасываемые_ошибки">Выбрасываемые ошибки</h3>
<dl>
<dt><code>IndexSizeError</code></dt>
<dd>Выбрасывает, если аргумент высоты или ширины равен нулю.</dd>
<dt><code>SecurityError</code></dt>
<dd>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 <code>SecurityError</code> being thrown in this situation, configure CORS to allow the source image to be used in this way. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">Allowing cross-origin use of images and canvas</a>.</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<p> </p>
<h3 id="Getting_image_data_from_a_canvas">Getting image data from a canvas</h3>
<p>This example draws a rectangle, and then uses <code>getImageData()</code> to grab a portion of the canvas.</p>
<h4 id="HTML">HTML</h4>
<pre><code><canvas id="canvas"></canvas></code></pre>
<h4 id="JavaScript">JavaScript</h4>
<p>The object retrieved by <code>getImageData()</code> 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).</p>
<pre><code>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);</code></pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("Getting_image_data_from_a_canvas", 700, 180)}}</p>
<p> </p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
</div>
<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p>
<p> </p>
<h2 id="См_также">См также</h2>
<ul>
<li>Интерфейс, определяющий его, {{domxref("CanvasRenderingContext2D")}}.</li>
<li>{{domxref("ImageData")}}</li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a></li>
</ul>
|
