Преоразмеряване и изрязване на изображения с елемента Canvas, Уеб дизайн
В тази статия ще разгледам как да преоразмерявам и изрязвам изображения с помощта на елемента HTML5 и тъй като вече сме на това, нека създадем някои страхотни контроли за преоразмеряване на изображения по пътя, които сте виждали много в приложенията за редактиране на снимки.
В реална среда уебсайт или приложение може да използва тази техника за преоразмеряване и създаване на профилна снимка преди качване.
Можем да направим това и на сървъра, но в този случай ще са необходими потенциално големи размери на файлове, което ще отнеме много време. Вместо това можем да променим размера на изображението от страна на клиента, преди дори да се зареди. Това ще направи всичко много по-бързо.
За да направим това, ще създадем HTML5 елемент и ще покажем изображение на платното с определен размер и след това ще извлечем новите данни за изображение от платното като URI данни.
Повечето браузъри вече поддържат тези методи, така че трябва да можете да използвате тази техника точно сега. Трябва обаче да сте наясно с някои ограничения, които не се поддържат от браузър, като качество на изображението и производителност.
Преоразмеряването на много големи изображения може да забави браузъра или в някои случаи дори да доведе до срив на приложението. Следователно има смисъл да зададете разумни ограничения за размера на файла, който може да бъде качен. Ако качеството е важно за вас, може да намерите тази техника за непрактична, тъй като браузърът влошава качеството на изображението по време на обработката.
Има редица методи, които могат да се използват за повишаване на качеството на изображения, мащабирани от платното, но ние няма да ги разгледаме в тази статия.ние ще.
Можете да видите крайния резултат в тази демонстрация или можете да изтеглите ZIP архива.
Е, сега да започваме!
В нашата демонстрация ще започнем със съществуващо изображение: