Одна из самых впечатляющих функций <canvas> - это возможность использования изображений. Вы можете использовать <canvas>  для динамического изменения таких фото, как фоны, графики, для спрайтов в играх, и так далее. При этом в качестве изображений можно брать любые форматы: PNG, GIF, JPEG.

Метод drawImage()

Для рисования изображения на canvas используется метод  drawImage(). Его синтаксис может быть таким:

где:

  • image - это элемент для отображения в контексте. Функция принимает любой источник изображения, пригодный для отображения на холсте.
  • dx - координата по оси Х, обозначающая стартовую точку холста-приёмника, в которую будет помещён верхний левый угол исходного image.
  • dy - координата по оси Y, обозначающая стартовую точку холста-приёмника, в которую будет помещён верхний левый угол исходного image.
  • dWidth - ширина изображения, полученного из исходного image. Эта опция позволяет масштабировать изображение по ширине. Если опция не задана, изображение не будет масштабировано.
  • dHeight - высота изображения, полученного из исходного image. Эта опция позволяет масштабировать изображение по высоте. Если опция не задана, изображение не будет масштабировано.

  • sx - координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещён в контекст-приёмник.
  • sy - координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещён в контекст-приёмник.
  • sWidth - ширина фрагмента, который будет вырезан из изображения источника и помещён в контекст-приёмник. Если не задана, фрагмент от точки, заданной sx и sy до правого нижнего угла источника будет целиком скопирован в контекст-приёмник.
  • sHeight - высота фрагмента, который будет вырезан из изображения источника и помещён в контекст-приёмник.

Если нам нужно нарисовать картинку в canvas частично, нужно указывать сначала координаты левого верхнего угла картинки-исходника и нужные размеры по ширине и высоте, а затем уже координаты расположения верхнего левого угла этой картинки в canvas, а также размеры в canvas по ширине и высоте. Учтите, если размеры не будут совпадать, то картинка в canvas будет отображаться с искажениями.

размеры в drawImage()

Примечание: Метод drawImage() использует внутренние размеры элемента-источника, выраженные в CSS-пикселях (а не реальные размеры самой картинки).

На примере ниже вы можете посмотреть несколько вариантов рисования с помощью функции drawImage():

See the Pen canvas drawImage() options by Elen (@ambassador) on CodePen.0

В коде выше в функциях при клике на кнопке в качестве исходного изображения мы использовали то, что находилось ниже элемента canvas и имело id="pic".

Есть несколько способов, чтобы получить изображения для использования на холсте.

Использование изображений из той же страницы

Мы можем получить ссылку на изображение, на той же странице, на canvas с используя один из способов:

  • коллекция document.images (например, document.images[0]);
  • метод document.getElementsByTagName()(например, document.getElementsByTagName('img')[0]) ;
  • чтобы получить конкретное изображение по  id, вы можете использовать document.getElementById(),
  • загруженное пользователем изображение.

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

В коде ниже вы найдете такой способ. При клике на кнопку вы будете загружать увеличенное изображение и отображать его в canvas.

See the Pen drawImage in canvas by Elen (@ambassador) on CodePen.0

Если при этом изображение было загружено с использованием необязательных параметров width и height в конструкторе new Image(), вместо element.width и element.height вам следует использовать свойства naturalWidth  и naturalHeight  экземпляра картинки (или videoWidth и videoHeight, если источником является элемент <video>), чтобы добиться правильного масштабирования и получения фрагментов картинки.

Аналогично тому, как мы рисуем в canvas изображения с помощью drawImage(), можно в canvas отображать видео, запустив функцию drawImage() во время проигрывания видео по событию onplay:

See the Pen Video with Canvas by LeTea (@letea)
on CodePen.0

Анимированные изображения на основе спрайтов в canvas

Спрайты - это наборы изображений с определенным шагом. То есть в них одинаковое количество пикселей предполагается на каждое изображение, причем и по горизонтали, и по вертикали. Использовать их можно для анимации персонажа, например.  Представьте себе, насколько ресурсоемким будет хранение и загрузка огромного набора изображений, описывающих каждый кадр анимации в игре, если хранить их по отдельности. Вместо этого есть одно изображение, и все позиции персонажа расположены в сетке, как показано ниже.

Mario

Ссылка на картинку https://i.postimg.cc/vZB6V2bQ/mario.png

Чтобы выполнить анимацию, вместо загрузки нового изображения каждую миллисекунду часть того же изображения отображается в окне просмотра только в разных позициях. Для этого на нашем спрайте нужно определить размеры сетки для каждого положения Марио.

mario-grid

Обратите внимание, что вся сетка состоит из ячеек одинакового размера (32 x 39). Но это всего лишь один кадр, который нам нужно будет повторять в коде с помощью функции requestAnimationFrame().

Вот пример с анимацией:

See the Pen canvas draw animated image by Elen (@ambassador) on CodePen.0

Изменение и сохранение изображения на основе использования canvas

В примере ниже вы сможете загрузить фото и наложить на него фильтры, повернуть или отразить. Кроме того, вы можете сохранить полученное фото после всех манипуляций.

See the Pen Basic Image Editor in JavaScript by Elen (@ambassador) on CodePen.0

Примеры изменения изображений с помощью метода drawImage() в canvas

В примере ниже вы найдете "нарезку" оригинального фото на основе функции drawImage() в canvas. Довольно интересный эффект, не так ли?

See the Pen Glitch Art with HTML5 Canvas by Dudley Storey (@dudleystorey) on CodePen.0

И второй подобный пример с нарезкой фото и анимацией на странице:

See the Pen Canvas image glitch animation by renatoruk (@renatoruk) on CodePen.0

В этом примере при клике ваше изображение разлетится на множество цветных кусочков. Кликните на фото для появления следующей картинки.

See the Pen JavaScript Canvas Effect by Elen (@ambassador) on CodePen.0

Эффект появления изображений

Кликните на фото для повторения эффекта.

See the Pen Stretching pixels by Fabio Ottaviani (@supah) on CodePen.0

И еще один эффект появления из точек

See the Pen Wolf by massimo (@_massimo)
on CodePen.0

Маска для изображения

See the Pen Fun with pixels by massimo (@_massimo) on CodePen.0

Отображение размытых кадров видео на заднем плане

В этом примере drawImage() позволяет создавать размытое изображение кадра в canvas по мере воспроизведения видео.

See the Pen Video "ambilight" (bias lighting) by Lembit Kivisik (@lembitk) on CodePen.0

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

See the Pen Pixel manipulation Canvas Video by Elen (@ambassador) on CodePen.0

Источники: How displaying an image on HTML5 canvas works  и  Build An Image Editor in HTML CSS & JavaScript

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *