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

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

Задание

1. Разместить внешнее изображение на холсте.
2. Создать изображение холста, использовав внешнюю картинку в качестве фона.
3. Замостить холст внешним изображением (масштабирование изображения).
4. Отобразить на холсте часть внешнего изображения.

Ход работы

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

1. В случае, если изображение находится на той же странице, то можно обратиться к нему через document.images, document.getElementByTagName или document.getElementById.
2. При наличии на странице нескольких элементов canvas, можно указать один из них в качестве источника изображения для другого посредством document.getElementByTagName или document.getElementById.
3. Создание изображения в рамках веб - сценария. Объект JavaScript Image создается непосредственно в коде.
4. Вложение изображения при помощи data: url. Data urls позволяют вам полностью определить изображение непосредственно в коде как Base64-кодированную строку. Преимущество данного метода в том, что изображение будет доступно немедленно без каких либо дополнительных запросов к серверу.

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

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

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); // вызов метода отрисовки изображения на холсте
  }
  

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

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

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

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

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

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

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

где:

• i – объект JavaScript Image;
• 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); /* вызов метода для отрисовки изображения на холсте 
      с переменными начальными координатами */
    }
   }
  }

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

Рис. 26.2. Результат масштабирования и размещения нескольких внешних изображений на холсте

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

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

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

где:

• i – объект JavaScript Image;
• 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 - документ в браузере, получим следующее:

Рис. 26.3. Результат резки изображения и размещения вырезанной части на холсте