API обработки файлов позволяет веб-приложениям регистрироваться в качестве обработчика файлов для форматов файлов, которые приложение может поддерживать. Узнайте, как приложение для редактирования изображений Photopea использует этот API.
Введение
(Эта статья также доступна в виде видео.)
Photopea — бесплатный онлайн-редактор изображений, разработанный Иваном Куцкиром . Иван начал работать над приложением в 2012 году и ведет блог, в котором делится основными функциями, которые он добавляет в Photopea. Photopea может работать с форматами PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) и CDR (CorelDRAW).
Обработка файлов в Photopea
Как устанавливаемый PWA , Photopea запускается в отдельном окне, когда пользователь выбирает установку приложения. Это открывает суперсилу PWA, которую Photopea активно использует: обработку файлов .
Декларативная часть API обработки файлов
После установки Photopea регистрирует себя как обработчик файлов в операционной системе для различных поддерживаемых ею форматов файлов. Это происходит в Web App Manifest путем добавления поля file_handlers . Каждый поддерживаемый тип файла является объектом, action имеет относительный URL в качестве своего значения, объект accept — карту типов MIME и связанных расширений файлов. Например, {"image/jpeg": [".jpeg", ".jpg"]} . Следующий код — это производственный Web App Manifest Photopea с выделенными соответствующими частями.
{
"name": "Photopea",
"short_name": "Photopea",
"display": "standalone",
"icons": [
{ "src": "promo/icon512.png", "type": "image/png", "sizes": "512x512" },
{ "src": "promo/maskable512.png", "type": "image/png", "sizes": "512x512", "purpose":"maskable" }
],
"start_url": "/?utm_source=homescreen",
"background_color":"#0f171d",
"theme_color": "#474747",
"file_handlers": [
{ "action": "/", "accept": { "image/psd" : [ ".psd" ] } },
{ "action": "/", "accept": { "image/jpeg": [ ".jpeg", ".jpg" ] } },
{ "action": "/", "accept": { "image/png" : [ ".png" ] } },
{ "action": "/", "accept": { "image/webp": [ ".webp" ] } },
{ "action": "/", "accept": { "image/bmp" : [ ".bmp" ] } },
{ "action": "/", "accept": { "image/gif" : [ ".gif" ] } },
{ "action": "/", "accept": { "image/svg+xml": [ ".svg" ] } },
{ "action": "/", "accept": { "image/pdf" : [ ".pdf" ] } },
{ "action": "/", "accept": { "image/tiff": [ ".tif", ".tiff" ] } },
{ "action": "/", "accept": { "image/ai" : [ ".ai" ] } },
{ "action": "/", "accept": { "image/psb": [ ".psb" ] } },
{ "action": "/", "accept": { "image/xcf": [ ".xcf" ] } },
{ "action": "/", "accept": { "image/sketch": [ ".sketch" ] } },
{ "action": "/", "accept": { "image/xd" : [ ".xd" ] } },
{ "action": "/", "accept": { "image/pxd": [ ".pxd" ] } },
{ "action": "/", "accept": { "image/cdr": [ ".cdr" ] } },
{ "action": "/", "accept": { "image/eps": [ ".eps", ".ps" ] } },
{ "action": "/", "accept": { "image/x-icon": [ ".ico" ] } },
{ "action": "/", "accept": { "image/jpx": [ ".jpx" ] } },
{ "action": "/", "accept": { "image/jp2": [ ".jp2" ] } },
{ "action": "/", "accept": { "image/x-tga": [ ".tga" ] } },
{ "action": "/", "accept": { "image/vnd-ms.dds": [ ".dds" ] } }
],
"share_target": {
"action": "/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "image",
"accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
}
]
}
}
}
Обязательная часть API обработки файлов
Затем императивная часть API занимается фактической обработкой файла(ов), которые операционная система передает в PWA. Код Photopea, очевидно, сильно минимизирован и уродлив, но, тем не менее, суть приведенного ниже фрагмента не так уж и сложна для понимания. Интерфейс LaunchQueue (минифицированный как N ) имеет метод setConsumer() , который принимает функцию в качестве аргумента. Эта функция, в свою очередь, принимает объект LaunchParams (минифицированный как W ). Этот объект LaunchParams имеет свойство files , указывающее на массив объектов FileSystemHandle , доступный только для чтения, который затем циклически проходит остальная часть кода и для каждого получает объект File (минифицированный как G ) путем вызова getFile() . Затем этот файл передается другой логике в Photopea, которая заботится об отображении файла.
var N = window.launchQueue;
if (N) {
var $ = this.UA;
N.setConsumer(function (W) {
var O = W.files;
console.log(O);
for (var Y = 0; Y < O.length; Y++) {
var T = O[Y];
T.getFile().then(function (G) {
$.YO([G], null, null, null, [T]);
});
}
});
}
Выводы
Пользователи долгое время просили Photopea стать обработчиком файлов для изображений . В 2020 году, когда появился этот вопрос, эта функция была совершенно немыслима, но нетерпеливый пользователь обнаружил API обработки файлов на самых ранних стадиях в начале 2022 года, когда он еще был за флагом. Обработка файлов в конечном итоге была включена в Chrome 102 и стала любимой функцией Photopea, используемой ежедневно его пользователями, некоторые даже называли ее игровым переломным моментом . Обязательно попробуйте Photopea , установите его на свой рабочий стол, а затем попробуйте открыть один из поддерживаемых им форматов файлов! Удачного редактирования изображений!