Нотатки від команди про майстерність, формати та невеликі рішення, що стоять за гарною круглою обрізкою.
Бібліотека 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 КБ платяться один раз за сесію і повторно використовуються у всіх маршрутах пресетів обрізання через розділення чанків 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 КБ.
