JavaScript resizer за изображения, JavaScript Image Resizer, Blog Webferia
Днес ще ви разкажа за внедряването на преоразмерителя на изображения на клиента с помощта на javascript, няма да навлизам в детайлите на алгоритъма за обработка, но ще се съсредоточа върху задачите, които трябваше да бъдат решени и грешките, с които трябваше да се сблъскам . Работен код на скрипта в края на статията. По-нататък, когато казвам „браузър“, имам предвид браузър, който поддържа необходимите функции. Тествано на IE10, Chrome, Firefox, Safari 5, Android (4.0, 4.1), IOS6.
Нека разгледаме съвсем стандартна ситуация, „щракнахме“ на мобилно устройство куп снимки, които трябва да качим на нашия сайт. По някаква причина не можем да качваме файлове, чийто размер например е повече от 2MB, също така не искаме да се занимаваме с обработка на изображения в програма на трета страна, която все още трябва да бъде инсталирана на нашата джаджа, както и размера на снимката е 8 мегапиксела за нас излишни. Ще използваме HTML5.
И така, в HTML5 се появиха такива функции като FileReader и платно, първата трябва да „прочетем“ (заредим) изображението, втората - за директна обработка. Планът за действие е както следва:
- прочетете изображението;
- обработва изображението;
- качете изображение на сървъра;
Ще пропусна всякакви проверки за поддръжка на функции от браузърите, ще приемем, че ако ще използвате този скрипт, всичко вече е проверено. Също така, веднага ще направя резервация, не помня точно в кой конкретен браузър е бил всеки конкретен проблем. Функциите, които не са декларирани никъде, но са представени в „извлеченията“ от скрипта, присъстват в оригиналния скрипт.
Четем изображението или „се вкараме в първата партида грешки“.
Манипулатор за промяна на входа:
Работи в Chrome, FF, Safari, IPhone, не работи в Android (Dolphin) и IE10. Логично е да се приеме, че проблемът е в "зареждането" на обекта на изображението, тъй като обектът не е зареден в DOM. Пренаписваме:
Работи в IE10, но все още не работи в Android, освен това не искаме да показваме каченото изображение. Какъв е проблемът с Android? Оказва се, че за него трябва да направите това: