Изображения на canvas

Последнее обновление: 06.11.2023

Ранее уже рассматривалась установка изображений в качестве фона фигур, но мы также может отдельно выводить изображения на canvas. Для этого у контекста canvas применяется метод drawImage(). Этот метод имеет три версии:

  • context.drawImage(image, x, y)

    Здесь параметр image передает выводимое изображение, а параметры x и y - координаты верхнего левого угла изображения.

  • context.drawImage(image, x, y, width, height)

    С помощью дополнительных параметров width и height позволяет соответственно задать ширину и высоту выводимого изображения.

  • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

    Где параметры sx и sy представляют координаты на изображении, с которого начиется обрезка изображения, а параметры sWidth и sHeight представляют соответственно ширину и высоту выреза относительно координат sx и sy.

    Параметры dx и dy указывают координаты отрисовки обрезанного изображения на canvas, а dWidth и dHeight указывают соответственно на ширину и высоту изображения на canvas.

      • Например, применим первую версию метода для вывода изображения:

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<canvas id="canvas" width="450" height="300"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const img = new Image();
img.src = "forest2.png";
img.onload = ()=> context.drawImage(img, 0, 0);       
</script>
</body>
</html>
      Вывод изображений на canvas в JavaScript

      Опять же при выводе изображения нам надо быть уверенными, что изображение уже загружено браузером и готово к использованию, поэтому метод отрисовки изображения помещается в обработчик загрузки изображения img.onload.

      Вторая версия метода drawImage() позволяет дополнительно задать ширину и высоту выводимого изображения, что может использоваться для масштабирования изображения:

      const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const img = new Image();
img.src = "forest2.png";
img.onload = ()=> {
	context.drawImage(img, 10, 10, 180, 150);
	context.drawImage(img, 200, 10, 180, 150);
}
      Вывод двух изображений на canvas в JavaScript с помощью метода drawImage

      Также применим третью форму метода drawImage():

      const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const img = new Image();
img.src = "forest2.png";
img.onload = ()=> context.drawImage(img, 0, 100, 300, 200, 20, 30, 300, 200);
      Настройка вывода изображения на canvas в JavaScript

      Захват изображений с других элементов

      Одной из замечательных функциональностей элемента canvas является возможность захвата изображения с другого элемента, например, элемента video или другого элемента canvas. Например:

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<video id="myVideo" src="cats.mp4" width="300" height="200" controls ></video>
<canvas id="canvas" width="300" height="200" style="background-color:#eee; border:1px solid #ccc;"></canvas>
<div><button id="snap">Сделать снимок</button></div>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const video = document.getElementById("myVideo");
document.getElementById("snap").onclick = () => context.drawImage(video, 0, 0, 300, 200);
</script>
</body>
</html>
      Получение изображения из видео на canvas в JavaScript

      По нажати на кнопку canvas будет получать текущий кадр воспроизводимого видео и фиксировать его в качестве изображения. При этом в метод drawImage в качестве первого параметра передается сам элемент, используемый как источник изображения.

      НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм