Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Практическая работа 8:

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

Аннотация: В рамках данного занятия нами будут рассмотрены вопросы работы с уже существующими файлами изображений, при помощи 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.

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

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

Рис. 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.

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

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

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

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

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

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

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия