Var img new image

Var img new image

↑ HTML5 Canvas
Урок — Работа с изображениями в Canvas
← Предыдущий урок

Вставка изображений в Canvas

Метод drawImage() позволяет вставлять другие изображения (img и canvas) на канву. В браузере Opera также существует возможность рисования SVG-изображений внутри элемента canvas. drawImage() довольно сложный метод, который может принимать три, пять или девять аргументов.

Три аргумента: Базовое использование метода drawImage() включает один аргумент для указания изображения, которое необходимо вывести на канве, и два аргумента для задания координат.

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

Девять аргументов: Используются предыдущие пять аргументов и еще четыре: два для координат области внутри исходного изображения и два для ширины и высоты области внутри исходного изображения для обрезки изображения перед вставкой в Canvas.

Спецификация HTML 5 объясняет эти аргументы следующим образом:

Рассморим примеры использования всех трех вариантов.

Пример использования drawImage() с тремя аргументами:

Результат Обновите браузер Нарисовать Должно выглядеть так

Пример использования drawImage() с пятью аргументами:

Результат Обновите браузер Нарисовать Должно выглядеть так

Пример использования drawImage() с пятью аргументами:

Результат Обновите браузер Нарисовать Должно выглядеть так

Импортирование картинок

Обычно импортирование картинок происходит в два этапа:
Сначала нам нужна ссылка на объект JavaScript Image или на другой элемент canvas, как источник. Невозможно использовать картинки просто передавая URL/путь до них.
Потом мы рисуем картинку на canvas, используя функцию drawImage.
Давайте сначала рассмотрим первый шаг. Доступны четыре варианта:

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

Мы можем получить доступ к любому изображению на странице, используя коллекцию document.images, метод document.getElementsByTagName , либо, если нам известен атрибут ID изображения, метод document.getElementById.

Использование другого элемента canvas
Как и к нормальным изображениям, мы можем получить доступ к элементам canvas через метод document.getElementsByTagName или метод document.getElementById. Перед тем, как вы будете использовать canvas как источник, убедитесь, что вы что-либо уже нарисовали на нём.
Один из наиболее практичных вариантов использования этого метода — создание маленьких превью-картинок для больших изображений canvas.

Создание изображения с нуля
Ещё один вариант — создавать в нашем скрипте новые объекты Image. Главный недостаток такого подхода в том, что если мы не хотим, чтобы наш скрипт "зависал" посередине в ожидании загрузки изображения, нам нужно средство предварительной загрузки изображений.

Чтобы создать новый объект-картинку, мы делаем следующее:
var img = new Image(); // Создаём новый объект Image
img.src = ‘myImage.png’; // Устанавливаем путь к источнику

Когда этот скрипт выполняется, изображение начинает загружаться. Если к моменту исполнения инструкции drawImage загрузка ещё не закончилась, скрипт "подвисает" до её окончания. Если вы не хотите, чтобы такое случилось, используйте обработчик события onload:
var img = new Image(); // Создать новый объект Image
img.src = ‘myImage.png’; // Установить путь к источнику
img.onload = function() <
// выполнить drawImage здесь
>

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

Вложение изображения с помощью data: url
Еще один возможный способ вставки изображений — это использование data: url. Data urls позволяют вам полностью определить изображение непосредственно в коде как Base64-кодированную строку. Преимущество данного метода в том, что изображение будет доступно немедленно без каких либо дополнительных запросов к серверу. (Еще одно преимущество заключается в возможности инкапсулировать все Ваши CSS, JavaScript, HTML и изображения в одном файле, что значительно упрощает перемещение всего документа.) Однако изображения, определенные таким способом, не кэшируются, и строковое представление больших изображений может быть довольно длинным.

Рисование изображений

После того как мы указали ссылку на источник мы можем использовать метод drawImage чтобы присвоить изображению положение на холсте. Как мы увидим дальше метод drawImage имеет три вохможных вариацнии. Основная форма метода выглядит таким образом.

drawImage(image, x, y)

Где image это идентификатор изображения а, x и y положение на холсте по оси ординат и абсцис соответственно.

Пример 1 использования изображения

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

function draw() <
var ctx = document.getElementById(‘canvas’).getContext(‘2d’);
var img = new Image();
img.onload = function() <
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
>
img.src = ‘images/backdrop.png’;
>

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

Второй вариант использования метода drawImage отличается от первого тем что в нем присутствуют параметры масштабного отображения на холсте.

drawImage(image, x, y, width, height)

Где width и height ширина и высота изображения на холсте.

Пример 2 использования изображения

В этом примере мы используем одно изображение как обои чтобы повторить его на холсте несколько раз. Это осуществляется с помощью цикла и размещения масштабных изображений на разных позициях. В этом примере первый цикл for отсчитывает ряды а второй цикл for отсчитывает колоны. Изображение равно одной третьей исходного изображения (50×38 пикселей).

Читайте также:  Заблокирована страница в контакте как разблокировать 2018

Примечание: При масштабировании изображение теряет качество, а текст теряет очертания.

function draw() <
var ctx = document.getElementById(‘canvas’).getContext(‘2d’);
var img = new Image();
img.onload = function() <
for (i=0;i

Разрезание изображений

Третий и последный типа метода drawImage включает 8 новых параметров. Мы будем использовать этот метод чтобы отбражать часть изображения на холсте

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Первый параметр image, определяет идентификатор изображения. Следующие 2 элемента определяют положения верхнего левого угла вырезаного изображения относительного исходного положения а, следующие два параметра определяют высоту и ширину вырезаного изображения. Следующие два параметра определяют положение изображения на холсте а, следующие два параметра масштаб изображения.

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

Пример 3 использования изображения
В этом примере мы будем вырезать голову носорога и вставлять ее в рамку с альфа каналом.

В этом примере мы используем другой подход к загрузке изображений, чем в примере выше. Мы просто размечаем изображения непосредственно в HTML документе и используем правила CSS, чтобы скрыть их. Обоим изображениям мы присваиваем атрибут id чтобы их было легче выбрать. Скрипт сам по себе очень прост. Сначала мы вырезаем голову носорого и помещаем ее на холст а, затем помещаем изображение рамки на холст.



function draw() <
var canvas = document.getElementById(‘canvas’);
var ctx = canvas.getContext(‘2d’);

// Draw slice
ctx.drawImage(document.getElementById(‘source’),
33,71,104,124,21,20,87,104);

// Draw frame
ctx.drawImage(document.getElementById(‘frame’),0,0);
>

Пример галереи

В финальном примере мы сделаем простую галерею изображений. Галерея состоит из таблицы содержащей несколько изображений. При загрузке страницы каждое изображение вставляется на холст а, затем и рамка вокруг него.

Код ниже, должен говорить сам за себя. Мы используем цикл и добавляем новые элементы на холст. Наверное, единственное, что можно отметить, для тех, кто не очень знаком с DOM, является использование insertBefore метода. insertBefore это метод родительского узла (ячейки таблицы) в который мы хотим вставить наш новый узел (холст).

// Loop through all images
for (i=0;i

Этой статьей я продолжу серию материалов посвященных тегу canvas – специальному расширению, поддерживаемому передовыми браузерами (opera, firefox) и позволяющему вам, используя вызовы функций javascript, рисовать растровые изображения в окне браузера. В прошлый раз я рассказал об методике внедрения тега canvas внутрь веб-страницы, о том как сделать fallback – механизм позволяющий корректно обработать ситуацию когда страница открывается не поддерживающим возможности canvas браузером (это про тебя дорогой internet explorer). Так же мы рисовали простые фигуры: линии, прямоугольники, эллипсы и дуги. Сегодня мы поговорим о работе с преобразованиями, управлении режимами наложения изображений при отрисовке.

Что такое преобразования? В мире компьютерной графики под ними понимают простейшие математические операции, позволяющие вам перед началом, собственно, рисования выполнить некоторое изменение в системе координат холста. По умолчанию ваш холст имеет точку начала координат (0,0), а масштаб оперирует минимальной цифрой в 1 пиксель, оси же направлены строго под прямым углом друг к другу – одним словом, то, что мы называем прямоугольной декартовой системой координат.

И, соответственно, перед началом рисования вы можете изменить эту систему координат, использую вызовы специальных функций в составе контекста рисования. За это отвечают следующие функции. Translate – эта функция получает в качестве параметра координаты куда переместится центр координат (СК). Функция rotate позволяет выполнить вращение СК. Вращение выполняется против часовой стрелки. Последняя функция преобразования ск – scale — масштабирование. Эта функция получает два параметра x,y, которые будут играть роль коэффициентов масштабирования. Очевидно, что если вы рисуете что-то достаточно сложное, то вы будете многократно вызывать фукцнии изменения свойств СК: вы будете менять параметры, а затем возвращаться в некоторое исходное состояние. Чтобы не запутаться какие свойства у вас сейчас установлены (на самом деле вы можете изменять гораздо большее количество параметров управляющих особенностями рисования, чем я перечислил выше). Так вот, чтобы не забыть какие свойства установлены для canvas, вы можете применять две парные функции: save и restore. Эти функции не получают ни каких параметров. Функция save сохраняет текущее состояние canvas – все его свойства. А функция restore – наоборот, восстанавливает эти параметры. Работа функций сохранить/восстановить построена по принципу стека. Вы можете вызывать фукнцию save любое количество раз и все состояния будут сохраняться укладываясь в некую виртуальную стопку. Каждый же вызов restore будет брать с вершины этой стопки сохраненный набор параметров. Соответственно, вы не можете вызывать restore большее количество раз, чем было положено туда состояний с помощью save.

Читайте также:  Видеокамера для начинающего оператора

Теперь давайте сделаем парочку примеров на каждую из этих функций. Начнем с перемещения центра СК. Для пример нарисуем шахматную доску состоящую из множества черных квадратиков на белом фоне. Каждый квадрат будет рисоваться размером в 10px, и иметь координаты 0,0. естественно, чтобы квадратики не накладывались друг на друга я вынужден перед рисованием каждого из них передвигать центр СК.

Изображения на web-странице

Рассмотрим теперь объект Image, который стал доступен, начиная с версии с 1.1 языка JavaScript (то есть с Netscape Navigator 3.0). С помощью объекта Image Вы можете вносить изменения в графические образы, присутствующие на web-странице. В частности, это позволяет нам создавать мультипликацию.
Заметим, что пользователи браузеров более старых версий (таких как Netscape Navigator 2.0 или Microsoft Internet Explorer 3.0 — т.е. использующих версию 1.0 языка JavaScript) не смогут запускать скрипты, приведенные в этой части описания. Или, в лучшем случае, на них нельзя будет получить полный эффект.
Давайте сначала рассмотрим, как из JavaScript можно адресоваться к изображениям, представленным на web-странице. В рассматриваемом языке все изображения предстают в виде массива. Массив этот называется images и является свойством объекта document. Каждое изображение на web-странице получает порядковый номер: первое изображение получает номер 0, второе — номер 1 и т.д. Таким образом, к первому изображению мы можем адресоваться записав document.images[0].
Каждое изображение в HTML-документе рассматривается в качестве объекта Image. Объект Image имеет определенные свойства, к которым и можно обращаться из языка JavaScript. Например, Вы можете определить, который размер имеет изображение, обратившись к его свойствам width и height. То есть по записи document.images[0].width Вы можете определить ширину первого изображения на web-странице (в пикселах).
К сожалению, отслеживать индекс всех изображений может оказаться затруднительным, особенно если на одной странице у Вас их довольно много. Эта проблема решается назначением изображениям своих собственных имен. Так, если Вы заводите изображение с помощью тэга

то Вы сможете обращаться к нему, написав document.myImage или document.images["myImage"].

Загрузка новых изображений

Хотя конечно и хорошо знать, как можно получить размер изображения на web-странице, это не совсем то, чего бы мы хотели. Мы хотим осуществлять смену изображений на web-странице и для этого нам понадобится атрибут src. Как и в случае тэга , атрибут src содержит адрес представленного изображения. Теперь — в языке JavaScript 1.1 — Вы имеете возможность назначать новый адрес изображению, уже загруженному в web-страницу. И в результате, изображение будет загружено с этого нового адреса, заменив на web-странице старое. Рассмотрим к примеру запись:

Здесь загружается изображение img1.gif и получает имя myImage. В следующей строке прежнее изображение img1.gif заменяется уже на новое — img2.gif:

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

Упреждающая загрузка изображения

Один из недостатков такого подхода может заключаться в том, что после записи в src нового адреса начинает процесс загрузки соответствующего изображения. И поскольку этого не было сделано заранее, то еще пройдет некоторое время, прежде чем новое изображение будет передано через Интернет и встанет на свое место. В некоторых ситуациях это допустимо, однако часто подобные задержки неприемлемы. И что же мы можем сделать с этим? Конечно, решением проблемы была бы упреждающая загрузка изображения. Для этого мы должны создать новый объект Image. Рассмотрим следующие строки:

В первой строке создается новый объект Image. Во второй строке указывается адрес изображения, которое в дальнейшем будет представлено с помощью объекта hiddenImg. Как мы уже видели, запись нового адреса в атрибуте src заставляет браузер загружать изображение с указанного адреса. Поэтому, когда выполняется вторая строка нашего примера, начинает загружаться изображение img2.gif. Но как подразумевается самим названием hiddenImg ("скрытая картинка"), после того, как браузер закончит загрузку, изображение на экране не появится. Оно будет лишь будет сохранено в памяти компьютера (или точнее в кэше) для последующего использования. Чтобы вызвать изображение на экран, мы можем воспользоваться строкой:

Но теперь изображение уже немедленно извлекается из кэша и показывается на экране. Таким образом, сейчас мы управляли упреждающей загрузкой изображения.
Конечно браузер должен был к моменту запроса закончить упреждающую загрузку, чтобы необходимое изображение было показано без задержки. Поэтому, если Вы должны предварительно загрузить большое количество изображений, то может иметь место задержка, поскольку браузер будет занят загрузкой всех картинок. Вы всегда должны учитывать скорость связи с Интернет — загрузка изображений не станет быстрее, если пользоваться только что показанными командами. Мы лишь пытаемся чуть раньше загрузить изображение — поэтому и пользователь может увидеть их раньше. В результате и весь процесс пройдет более гладко.
Если у Вас есть быстрая связь с Интернет, то Вы можете не понять, к чему весь этот разговор. О какой задержке все время говорит этот парень? Прекрасно, но еще остаются люди, имеющие более медленный модем, чем 14.4 (Нет, это не я. Я только что заменил свой на 33.6, да . ).

Читайте также:  Какой процессор выбрать амд или интел

Изменение изображений в связи с событиями, инициируемыми самим читателем

Вы можете создать красивые эффекты, используя смену изображений в качестве реакции на определенные события. Например, Вы можете изменять изображения в тот момент, когда курсор мыши попадает на определенную часть страницы. Проверьте, как работает следующий пример, просто поместив курсор мыши на картинку (впрочем, при этом Вы получите сообщение об ошибке, если пользуетесь браузером, поддерживающим лишь JavaScript 1.0 — как этого избежать, мы узнаем чуть позже).

Исходный код этого примера выглядит следующим образом:
При этом могут возникнуть следующие проблемы:

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

Теперь мы рассмотрим полный вариант скрипта, который мог бы решить эти проблемы. Хотя скрипт и стал намного длиннее — но написав его один раз, Вы не больше будете беспокоиться об этих проблемах.
Чтобы этот скрипт сохранял свою гибкость, следует соблюдать два условия:

  • Не оговоривается количество изображений — не должно иметь значения, сколько их используется, 10 или 100
  • Не оговоривается порядок следования изображений — должна существовать возможность изменять этот порядок без изменения самого кода

Посмотрим этот код в работе:


Рассмотрим скрипт (я внес туда некоторые комментарии):
Данный скрипт помещает все изображения в массив pics. Создает этот массив функция preload(), которая вызвается в самом начале. Вызов функции preload() выглядит просто как: Это означает, что скрипт должен загрузить с сервера два изображения: img1f.gif и img1t.gif. Первое из них — это та картинка, которая будет представлена, пока курсор мыши не попадает в область изображение. Когда же пользователь помещает курсор мыши на изображение, то появляется вторая картинка. При вызове функции preload() в качестве первого аргумента мы указываем слово "link1" и тем самым задаем на web-странице объект Image, которому и будут принадлежать оба предварительно загруженных изображения. Если Вы посмотрите в нашем примере в раздел , то обнаружите изображение с тем же именем link1. Мы пользуем не порядковый номер, а именно имя изображения для того, чтобы иметь возможность переставлять изображения на web-странице, не переписывая при этом сам скрипт.
Обе функции on() и off() вызываются посредством программ обработки событий onMouseOver и onMouseOut. Поскольку сам элемент image не может отслеживать события MouseOver и MouseOut, то мы обязаны сделать на этих изображениях еще и ссылки.
Можно видеть, что функция on() возвращает все изображения, кроме указанного, в исходное состояние. Делать это необходимо потому, что в противном случае выделеными могут оказаться сразу несколько изображений (дело в том, что событие MouseOut не будет зарегистрировано, если пользователь переместит курсор с изображения сразу за пределы окна).

Метод drawImage() рисует изображение, содержимое другого элемента или видео.

Также, метод drawImage() может нарисовать часть изображения и/или увеличить/уменьшить размер изображения.

Внимание: Нельзя вызывать метод drawImage() прежде, чем изображение будет загружено. Чтобы убедиться, что изображение было загружено, вызов метода drawImage() можно поместить внутри события window.onload() или document.getElementById("imageID").onload.

JavaScript синтаксис

Вывод изображения в заданной позиции на холсте:

JavaScript синтаксис: context.drawImage(img, x, y);

Вывод изображения в заданной позиции на холсте и определение его ширины и высоты:

JavaScript синтаксис: context.drawImage(img, x, y, width, height);

Обрезание изображения и вывод обрезанной части в заданную позицию:

JavaScript синтаксис: context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

Значения параметров

Параметр Описание
img Определяет используемое изображение, видео или элемент
sx Необязательный параметр. Координата X начальной точки обрезки
sy Необязательный параметр. Координата Y начальной точки обрезки
swidth Необязательный параметр. Ширина обрезанного изображения
sheight Необязательный параметр. Высота обрезанного изображения
x Координата X на холсте, куда будет помещено изображение
y Координата Y на холсте, куда будет помещено изображение
width Необязательный параметр. Применяемая ширина изображения (можно растянуть или сжать изображение)
height Необязательный параметр. Применяемая высота изображения (можно растянуть или сжать изображение)

Изображение для примера:

Пример №1

Нарисовать изображение на холсте:

Ваш браузер не поддерживает HTML5 тег canvas.

Пример №2

Поместим изображение в заданную позицию на холсте и определим его ширину и высоту:

Ваш браузер не поддерживает HTML5 тег canvas.

Пример №3

Обрежем изображение и поместим обрезанную часть в заданную позицию на холсте:

Ваш браузер не поддерживает HTML5 тег canvas.

Пример №4

Используемое видео (нажмите Play, чтобы начать демонстрацию):

Элемент canvas:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript (код рисует текущий кадр видео каждые 20 миллисекунд):

Ссылка на основную публикацию
Samsung galaxy j7 duo 2018
Samsung Galaxy J7 2018 года имеет форм-фактор фаблета благодаря тому, что диагональ его экрана равна 5.5 дюймам. Физическое разрешение матрицы...
Macrium reflect инструкция на русском
Windows Linux Mac OS Windows Phone Android Меню сайта Партнеры Статьи » Практикум Macrium Reflect инструкция пользователя Macrium Reflect —...
Mad moxxi borderlands 2
Неигровой персонаж в "Borderlands", "Borderlands 2" и "Borderlands: The Pre-Sequel", а также в "Poker Night 2" и "Tales from the...
Samsung galaxy radio fm
"FM радио (Radio FM)" – бесплатная программа для андроид, которая пригодится каждому радиолюбителю. Приложение отличается от себе подобного ПО полной...
Adblock detector