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).
Добавить комментарий