Бележки от екипа за майсторството, форматите и малките решения зад добрия кръгъл изрез.
Библиотеката cropperjs v2 и какво се промени от v1
Този инструмент е изграден върху cropperjs версия 2.1.1, пълно пренаписване на оригиналната библиотека cropperjs. Изданието v2 заменя стария API, базиран на конструктор (new Cropper(img, { aspectRatio: 1 })) с архитектура Web Components. Платното за изрязване, наслагването на селекция и елементът за изображение всички са персонализирани HTML елементи, регистрирани чрез CustomElementRegistry на браузъра. Това означава, че Shadow DOM обработва всички вътрешни стилове, няма отделен файл cropper.css за импортиране, което премахва една заявка за активи на Vite в сравнение с v1. Заключването на съотношение сега се задава директно върху елемента за селекция (cropperSelection.aspectRatio = 1), а не в конструктора, така че съотношението може да се променя по време на изпълнение без преинициализиране на целия интерфейс за изрязване. Библиотеката тежи 41 960 байта необработени и 12 175 байта gzip, измерено директно от заглавката content-length на CDN jsDelivr. Тези 12 KB се плащат веднъж на сесия и се преизползват във всички маршрути за предварителни настройки за изрязване чрез разделяне на чанкове Vite.
Как се изчисляват изходните пикселни размери без увеличаване
Когато влачите селекцията за изрязване на екрана, координатите, които виждате, са в пикселното пространство на изходното изображение, а не в пикселното пространство на CSS. Тази разлика е важна за екрани с висока плътност на пиксели, телефон със съотношение пиксели на устройство 3× показва изображение с ширина 300 CSS пиксела като 900 реални пиксела, но координатите на селекцията отразяват 900 реални пиксела, а не 300 CSS. Изходният файл, който изтегляте, съдържа точно толкова пиксела, колкото правоъгълникът на селекцията представлява в изходното изображение. Операцията за изрязване извиква selection.toCanvas() от API на cropperjs v2, асинхронен метод, който връща нов HTMLCanvasElement с размер на пикселните размери на селекцията. Това платно след това се предава на canvas.toBlob() за PNG, JPG или WebP, или на енкодера @jsquash/avif за AVIF. Не се вмъква стъпка за увеличаване. Ако селекцията ви е широка 800 пиксела, изходът е широк 800 пиксела.
Премахване на метаданни EXIF и какво се губи
Всеки експорт премахва данни EXIF, IPTC, XMP и ICC профили. Това се случва на ниво конвейер на платното, браузърът рисува декодираните пиксели на изображението върху HTMLCanvasElement и платното кодира към нов файл. Платното няма понятие за контейнери на метаданни, то само съхранява пикселни стойности и параметри за кодиране. Това, което се премахва, включва GPS координати, марка и модел на камерата, фокусно разстояние на обектива, настройки за експозиция, полета за авторски права и тагове на цветови профил. Цветовият профил sRGB ефективно е допускането, което платното прави, цветовете се рендерират през конвейера за дисплей на браузъра и се прекодират без прикачен профил. За повечето уеб публикации и употреба в социалните мрежи премахнатият EXIF е предпочитан, тъй като GPS данните могат да изложат информация за местоположение, която потребителят не е възнамерявал да сподели. За професионални фотографски работни процеси, където точността на цветовия профил има значение, използвайте инструмент за експорт с управление на цветовете.
Какво се случва, когато изрязвате анимиран GIF
Когато пуснете анимиран GIF в инструмента за изрязване, браузърът декодира само първия кадър към елемента за изображение, използван от платното за изрязване. Това е поведение на браузъра, а не ограничение на cropperjs, HTMLImageElement не излага отделните кадри на анимиран GIF към JavaScript по начин, по който API на платното би могло да итерира. Резултатът е, че само първият кадър е достъпен за селекцията за изрязване и крайният изход е неподвижно изображение в който и да е формат, който изберете на екрана за завършване. Ако входът е GIF и изберете GIF като изход, имплементацията на canvas.toBlob на браузъра не включва GIF енкодер, така че изходът тихо се понижава до PNG. Инструментът изрично отхвърля GIF като опция за изходен формат, за да избегне това тихо понижаване. Ако трябва да изрежете всички кадри на анимация, имате нужда от инструмент, който работи кадър по кадър, което този инструмент не поддържа.
Навигация с клавиатура и достъпност
Елементът за селекция на cropperjs v2 имплементира навигация с клавиатура като част от своята спецификация Web Component. След като преминете Tab към селекцията за изрязване, клавишите със стрелки преместват рамката с един пиксел в натиснатата посока. Shift плюс клавиш със стрелка премества рамката с десет пиксела. Това е нативно достъпно без заобиколен път за екранен четец или персонализиран JavaScript слой, обработчикът на клавиатура живее вътре в shadow root на елемента за селекция и се задейства при keydown. Това е важно за потребители, които разчитат на навигация само с клавиатура, включително някои настройки на помощни технологии, устройства за моторна достъпност и работни процеси за прецизност, където тъчпадът не може надеждно да постигне подпикселно подравняване. Броячът на пиксели на живо, прикачен към селекцията, също се актуализира с всяко натискане на клавиш, така че потребителите на екранни четци с aria-live региони върху брояча могат да чуят промяната на текущите размери. Достъпността с клавиатура е една област, в която този инструмент изпреварва iLoveIMG и img2go.
Компромиси при избор на формат след изрязване
Селекторът на формат на екрана за завършване дава четири опции. PNG е без загуби, всеки пиксел в областта за изрязване се съхранява точно както е декодиран от източника. Размерът на файла е по-голям от JPG за същото съдържание, обикновено от три до пет пъти по-голям за снимка. JPG прилага компресия със загуби на качество 0.9 (в скала от 0 до 1), което приблизително съответства на предварителната настройка за високо качество в повечето настолни редактори. При q0.9 разликата между оригинала и изхода обикновено не се вижда на стандартен монитор, но файлът е значително по-малък. WebP при същата настройка за качество произвежда файл приблизително 25 до 35 процента по-малък от JPG в нашите тестове за кодиране, със същото перцептивно качество при снимки. WebP също поддържа режим без загуби и запазва прозрачността. AVIF на качество 0.9 чрез библиотеката @jsquash/avif произвежда най-малкия изход от четирите формата, но първото кодиране в сесия изисква изтегляне на WASM модул от 870 KB.
