Canvas. Работа с изображениями

Целью данного занятия является ознакомление с методами импортирования изображений, масштабирование и резка изображений.

Задание

Ход работы

Для того чтобы импортировать изображение необходимо получить ссылку на объект JavaScript Image (в обязательном порядке). При это доступны следующие варианты:

Размещение внешнего изображения на холсте

Разместим холст на странице. В файле веб - сценариев напишем следующий код:

function createImage() 
  {
  var ctx = document.getElementById('lesson8').getContext('2d');
  var img = new Image(); // создание нового изображения
  img.src = 'img.bmp'; // путь к источнику для img
  img.onload = function() // объявление функции, котороя будет вызываться при загрузке img
  {
   ctx.drawImage(img,0,0); // вызов метода отрисовки изображения на холсте
  }
  

Открыв веб - страницу в браузере, получим следующее:

Создание изображения холста, при использовании в качестве обоев внешнего изображения остается для самостоятельного выполнения (необходимо только дописать код, формирующий изображение холста, после вызова drawImage).

Масштабирование изображения

Всего доступно три способа вызова метода drawImage, один из них был рассмотрен в рамках Листинга.

Для масштабирования изображения используется следующий вызов drawImage:

drawImagе(i, x, y, w, h),

где:

Для того, чтобы замостить холст изображениями, очевидно, необходимо n-ое количество раз вызвать метод drawImage (i, x, y, w, h) с указанием разных начальных координат для размещения изображения, для чего разумно будет использовать два цикла - счетчика, соответственно для координаты по горизонтали и по вертикали:

function createImage() 
  {
  var ctx = document.getElementById('lesson8').getContext('2d');
  var img = new Image(); // создание нового изображения
  img.src = 'img.bmp'; // путь к источнику для img
  img.onload = function() // функция, вызываемая при загрузке img
  { 
  for (h=0;h<3;h++)    /* цикл для задания координат (по-вертикали) для изображения */
  {
    for (w=0;w<5;w++) /* цикл для задания координат (по-горизонтали) для изображения */
    {
     ctx.drawImage(img,w*200,h*160,200,160); /* вызов метода для отрисовки изображения на холсте 
      с переменными начальными координатами */
    }
   }
  }

Получим следующий результат:

Резка изображения

Третий вариант вызова drawImage, позволяет отображать только часть внешнего изображения на холсте:

drawImage(i, srcx, srcy, srcw, srch, x, y, w, h),

где:

Ниже приведена функция, иллюстрирующая вырезку части изображения и размещения его на холсте:

function createImage() 
  {
  var ctx = document.getElementById('lesson8').getContext('2d');
  var img = new Image(); // создание нового изображения
  img.src = 'img.bmp'; // путь к источнику для img
  img.onload = function() // функция, вызываемая при загрузке img
  { 
    ctx.drawImage(img,300,250,100,250,0,0,100,250); /* вызов метода для вырезания части изображения 
     и отрисовки его на холсте */
  }

Открыв html - документ в браузере, получим следующее: