Изображения на 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