Метод drawImage()

Метод drawImage().

API Canvas (Холст) не представлял бы никакой ценности, если бы не предлагал возможности обработки изображений. Но несмотря на значимость изображений для веб-дизайна, для работы с графическими файлами предусмотрен только один встроенный метод.

Метод drawImage()

Метод drawImage() — единственный предназначенный для вывода изображений на холст. Однако он способен принимать различные значения, возвращая разные результаты в зависимости от переданных аргументов. Далее перечислены всевозможные варианты использования:

— drawImage(image, x, y). Такой синтаксис позволяет вывести изображение на холст в позиции, определяемой параметрами x и y. Первый параметр должен содержать ссылку на изображение;

— drawImage(image, x, y, width, height). Этот синтаксис позволяет масштабировать изображение перед тем, как помещать его на холст. Новые значения ширины и высоты задаются в параметрах width и height;

— drawImage(image, x1, y1, width1, height1, x2, y2, width2, height2).

Это самый сложный вариант синтаксиса. Для каждого параметра передаются по два значения. Смысл в том, что вы можете отрезать часть изображения и вывести его в указанной точке холста, одновременно поменяв его размер. Значения x1 и y1 определяют координаты верхнего левого угла отрезаемого фрагмента изображения. Значения widthl и heightl задают размер этого фрагмента изображения. Остальные значения (x2, y2, width2 и height2) объявляют точку, в которой будет выводиться изображение, а также его размер (который может отличаться от исходного).

В любом случае первый атрибут — это ссылка на изображение в том же документе, сгенерированная с помощью такого метода, как getElementById(), или созданием нового объекта изображения обычными методами JavaScript. Использовать URL-адреса или загружать файлы из внешних источников напрямую в данном методе запрещается.

Листинг 7.22. Работа с изображениями

Function initiate(){

Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(‘2d’);

Var img=new Image();

Img. src="http://www. minkbooks. com/content/snow. jpg"; img. addEventListener("load", function(){ canvas. drawImage(img,20,20)

}, false);

}

Window. addEventListener("load", initiate, false);

Начнем с простого примера. В коде из листинга 7.22 мы всего лишь загружаем изображение и выводим его на холст. Поскольку холст способен принимать только заранее загруженные изображения, эту ситуацию необходимо контролировать, отслеживая событие load. Мы добавили прослушиватель и объявили анонимную функцию для обработки данного события. Метод drawImage() внутри функции выводит изображение на холст только после того, как его загрузка завершается.

В листинге 7.22 в методе addEventListener() мы использовали анонимную функцию, а не ссылку на функцию. В подобных случаях, когда функция совсем небольшая, такая техника позволяет упростить код и сделать его более легким для понимания. Чтобы побольше узнать об этом, откройте наш веб-сайт и изучите ссылки для данной главы.

Листинг 7.23. Корректировка размера изображения по размеру холста

Function initiate(){

Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(‘2d’);

Var img=new Image();

Img. src="http://www.minkbooks.com/content/snow.jpg"; img. addEventListener("load", function(){

Canvas. drawImage(img,0,0,elem. width, elem. height)

}, false);

}

Window. addEventListener("load", initiate, false);

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

Листинг 7.24. Извлечение, изменение размера и визуализация

Function initiate(){

Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(‘2d’);

Var img=new Image();

Img. src="http://www.minkbooks.com/content/snow.jpg";

Продолжение &

Img. addEventListener("load", function(){

Canvas. drawImage(img,135,30,50,50,0,0,200,200)

}, false);

}

Window. addEventListener("load", initiate, false);

В листинге 7.24 представлен самый сложный синтаксис метода draw-Image(). Для того чтобы отрезать часть исходного изображения, поменять его размер, а затем вывести на холст, методу переданы девять аргументов. Мы вырезали из исходного изображения квадратный фрагмент, начинающийся с позиции (135, 50). Размеры квадрата 50×50 пикселов. После этого вырезанный блок увеличен до размера 200X200 пикселов и, наконец, визуализирован на холсте в точке (0, 0).

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

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