initial commit

1 files changed, 328 insertions, 0 deletions

diff --git a/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html
new file mode 100644
index 0000000000..881eb779d2
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html
@@ -0,0 +1,328 @@
+---
+title: CanvasRenderingContext2D.drawImage()
+slug: Web/API/CanvasRenderingContext2D/drawImage
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Ссылка
+  - метод
+translation_of: Web/API/CanvasRenderingContext2D/drawImage
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> метод Canvas 2D API предоставляет разные способы рисования изображения на холсте.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var>
+void <var><em>ctx</em>.drawImage(image, dx, dy, dWidth, dHeight);</var>
+void <var><em>ctx</em>.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);</var>
+</pre>
+
+<p><img alt="drawImage" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>image</code></dt>
+ <dd>Элемент для отображения в контексте. Функция принимает любой источник изображения, пригодный для отображения на холсте ({{domxref("CanvasImageSource")}}), конкретнее, {{domxref("CSSImageValue")}},  {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("ImageBitmap")}} или {{domxref("OffscreenCanvas")}}.</dd>
+ <dt><code>dx</code></dt>
+ <dd>Координата по оси Х, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного <code>image</code>.</dd>
+ <dt><code>dy</code></dt>
+ <dd>Координата по оси Y, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного <code>image</code>.</dd>
+ <dt><code>dWidth</code></dt>
+ <dd>Ширина изображения, полученного из исходного <code>image</code>. Эта опция позволяет масштабировать изображение по ширине. Если опция не задана, изображение не будет масштабировано.</dd>
+ <dt><code>dHeight</code></dt>
+ <dd>Высота изображения, полученного из исходного <code>image</code>. Эта опция позволяет масштабировать изображение по высоте. Если опция не задана, изображение не будет масштабировано.</dd>
+ <dt><code>sx</code></dt>
+ <dd>Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.</dd>
+ <dt><code>sy</code></dt>
+ <dd>Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.</dd>
+ <dt><code>sWidth</code></dt>
+ <dd>Ширина фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник. Если не задана, фрагмент от точки, заданной <code>sx</code> и <code>sy</code> до правого нижнего угла источника будет целиком скопирован в контекст-приемник.</dd>
+ <dt><code>sHeight</code></dt>
+ <dd>Высота фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник.</dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>INDEX_SIZE_ERR</code></dt>
+ <dd>Выбрасывается, если ширина или высота источника или приемника равна нулю.</dd>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>Источник не имеет данных изображения.</dd>
+ <dt><code>TYPE_MISMATCH_ERR</code></dt>
+ <dd>Тип данных источника не поддерживается.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_drawImage">Использование метода <code>drawImage</code></h3>
+
+<p>Вот простой пример использования <code>drawImage</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
+       width="300" height="227"&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var image = document.getElementById('source');
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+</pre>
+
+<p>Отредактируйте код ниже и посмотрите, как ваши изменения отражаются на холсте:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+&lt;/div&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Понимание_размеров_изображения-источника">Понимание размеров изображения-источника</h3>
+
+<p>Метод <code>drawImage()</code> использует <em>внутренние размеры</em> элемента-источника, выраженные в CSS-пикселях (а не реальные размеры самой картинки).</p>
+
+<p>Например, если изображение было загружено с использованием необязательных параметров <code>width</code> и <code>height</code> в конструкторе {{domxref("HTMLImageElement")}}, вместо <code>element.width</code> и <code>element.height</code> вам следует использовать свойства <code>naturalWidth</code> и <code>naturalHeight</code> экземпляра картинки (или <code>videoWidth</code> и <code>videoHeight</code>, если источник {{htmlelement("video")}}), чтобы добиться правильного масштабирования и получения фрагментов картинки.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var image = new Image(60, 45);   // Размер изображения
+image.onload = drawImageActualSize; // Рисуем изображение, когда оно будет загружено
+
+// load an image of intrinsic size 300x227 in CSS pixels
+image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+
+function drawImageActualSize() {
+  // use the intrinsic size of image in CSS pixels for the canvas element
+  canvas.width = this.naturalWidth;
+  canvas.height = this.naturalHeight;
+
+  // will draw the image as 300x227 ignoring the custom size of 60x45
+  // given in the constructor
+  ctx.drawImage(this, 0, 0);
+
+  // To use the custom size we'll have to specify the scale parameters
+  // using the element's width and height properties - lets draw one
+  // on top in the corner:
+  ctx.drawImage(this, 0, 0, this.width, this.height);
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Understanding_source_element_size', 700, 360)}}</p>
+
+<p> </p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p> </p>
+
+<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-drawimage", "CanvasRenderingContext2D.drawImage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функция</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageBitmap</code> как источник</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>SVGImageElement</code> как источник</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Сглаживание при сжатии</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(56)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функция</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageBitmap</code> как источник</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>SVGImageElement</code> как источник</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Сглаживание при сжатии</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(56)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] См. {{bug(1360415)}}</p>
+
+<h2 id="Дополнительно_о_совместимости">Дополнительно о совместимости</h2>
+
+<ul>
+ <li>Поддержка переворачивания изображения с использованием отрицательных значений <code>sw</code> и <code>sh</code> была добавлена в Gecko 5.0 {{geckoRelease("5.0")}}.</li>
+ <li>Начиная с {{geckoRelease("5.0")}}, <code>drawImage()</code> поддерживает отрицательные значения аргументов. Таким образом, можно переворачивать изображение вокруг разных осей.</li>
+ <li>Начиная с {{geckoRelease("5.0")}}, передача <code>null</code> или <code>undefined</code> как источника для <code>drawImage()</code> корректно выбрасывает исключение <code>TYPE_MISMATCH_ERR</code>.</li>
+ <li>Вплоть до Gecko 7.0 {{ geckoRelease("7.0") }} Firefox выбрасывал исключение в случае, если какая-то из координат равнялась нулю или бесконечности. Согласно спецификации, этого больше не происходит.</li>
+ <li>Gecko 9.0 {{ geckoRelease("9.0") }} теперь корректно поддерживает CORS без необходимости <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">"порчи" холста</a>.</li>
+ <li>Gecko 11.0 {{ geckoRelease("11.0") }} теперь поддерживает SVG как источник для <code>drawImage()</code> без необходимости <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">"порчи" холста</a>.</li>
+</ul>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><code>drawImage()</code> корректно работает с {{domxref("HTMLVideoElement")}} только в том случае, когда {{domxref("HTMLMediaElement.readyState")}}<strong> больше единицы</strong> (т.е., событие <strong>seek</strong> корректно вызывается после установки свойства <code>currentTime</code>)</li>
+ <li><code>drawImage()</code> будет использовать внутренний размер элемента-источника, выраженный в CSS-пикселях, при рисовании, фрагментировании или масштабировании.</li>
+ <li><code>drawImage()</code> проигнорирует все EXIF-данные изображений, в том числе и <code>Orientation</code>. Такое поведение метода особенно проблематично для iOS-устройств. Вам потребуется распознать ориентацию самостоятельно и использовать <code>rotate()</code> для ее корректировки.</li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Родительский интерфейс метода {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>