diff options
Diffstat (limited to 'files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html')
| -rw-r--r-- | files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html | 108 |
1 files changed, 108 insertions, 0 deletions
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 +--- +<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> |