Преоразмеряване и изрязване на изображения с Canvas
В този урок ще ви покажа как можете да преоразмерявате и изрязвате изображения с помощта на HTML5 елемент. Е, тъй като говорим за платно, ще се погрижим и за удобните контроли за размер, които могат да се видят в често срещаните приложения за обработка на изображения.
В примери от реалния живот сайт или приложение, което се занимава с изображения, използва подобни техники за манипулиране на размера и изрязването на изображението, преди директно качване на изображението на сървъра. Разбира се, това може да се направи и от страна на сървъра, но може да се наложи потенциално голям трансфер на файлове. Вместо това можем да променим размера на изображението от страна на клиента, преди да се зареди директно, което е много по-бързо.
За да направим това, ние създаваме HTML5 елемент, поставяме необходимото изображение върху него и след това извличаме новите данни за изображението под формата на URI за данни. Повечето браузъри поддържат добре тази технология, така че можете да я използвате, но просто трябва да сте наясно с някои ограничения, свързани с поддръжката на браузъра, като качество и производителност.
Преоразмеряването на големи изображения може да доведе до забавяне на браузъра и в някои случаи да се срине. Има смисъл да ограничите файла за изтегляне до разумен размер. Ако качеството е важно за вас, тогава резултатът, получен с помощта на браузъра, може да не ви удовлетвори. Има няколко техники за подобряване на качеството на изображенията, намалени с платно, но те не са разгледани в тази статия.
Ами да започнем!
В нашата демонстрация ще започнем със съществуващо изображение:
И всичко това! Това е целият код, който трябва да демонстрираме.
CSS също е доста минималистичен. На първо място, ще определим стиловете за контейнера за преоразмеряване и за самото изображение.
Следващата стъпка е да се дефинират позициите и стиловете за елементите за преоразмеряване. Това са малки квадратчета в ъглите на изображението, които трябва да плъзнете.
Нека започнем с дефиниране на променливи, инициализиране на платното и полученото изображение.
Нека дефинираме init функция, която се извиква незабавно. Тази функция обвива изображението в контейнер, създава елементи за манипулиране на размера и създава копие на оригиналното изображение. Също така задаваме обекта jQuery на елемента контейнер на отделна променлива, за да можем да се позовем към него по-късно, и прикачваме манипулатор на събитие за mousedown, за да проследява кога една от манипулаторите на размера се влачи.
Функциите startResize и endResize казват само на браузъра кога да обърне внимание на движението на курсора и кога да спре да му обръща внимание.
Преди да започнете да проследявате позицията на мишката, е необходимо да запазите параметрите на контейнера и други ключови точки. Ще ги съхраним в променливата event_state и ще ги използваме по-късно като отправна точка за определяне на промяната в ширината и височината.
Функцията за преоразмеряване прави най-много неща. Тази функция работи непрекъснато, докато потребителят плъзга една от дръжките за размер на изображението. Всеки път, когато тази функция бъде извикана, ние изчисляваме нова ширина и височина, получавайки текущата позиция на курсора спрямо началната точка.
След това ще добавим способността да поддържаме пропорциите на прозореца за преоразмеряване при задържане на клавиша Shift или с определена стойност на променливата.
И накрая, ще преоразмерим изображението, но само ако новата ширина и височина са в границите на променливите min и max, които зададохме в началото.
Коментирайте: тъй като ние наистина преоразмеряваме изображението, а не само променяме атрибутите му ширина и височина, струва си да помислим колко често се извиква функцията resizeImage с цел подобряване на производителността.
Директно преоразмеряване на изображението
Изчертаването на изображение на платно е много просто и се свежда до използването на метода drawImage. Първото нещо, което правим, е да зададем ширината и височината на платното и винаги използваме оригиналното копие на изображението. След това използваме метода toDataURL на платното, за да получим кодирания низ base64, представляващ модифицираното изображение, и да го поставим на страницата.
Пълно описание на всички опции, които могат да се използват с метода drawImage, можете да намерите в раздела за изрязване на този урок.
Твърде лесно? Тук има малка забележка: изображението трябва да е в същия домейн като страницата или трябва да бъде активирано междудомейнното споделяне на ресурси на сървъра. Ако тези условия не са изпълнени, може да срещнете проблеми.