Как приложение для редактирования изображений Photopea использует API обработки файлов, чтобы пользователи могли открывать файлы из проводника

API обработки файлов позволяет веб-приложениям регистрироваться в качестве обработчиков файлов для форматов файлов, которые приложение может поддерживать. Узнайте, как приложение для редактирования изображений Photopea использует этот API.

Thomas Steiner

Ivan Kutskir

Введение

(Эта статья также доступна в виде видео.)

Photopea — бесплатный онлайн-редактор изображений, разработанный Иваном Куцкиром . Иван начал работать над приложением в 2012 году и ведет блог, в котором рассказывает об основных функциях, которые он добавляет в Photopea. Photopea может работать с форматами PSD (Adobe Photoshop), XCF (GIMP), Sketch (приложение Sketch), XD (Adobe XD) и CDR (CorelDRAW).

Обработка файлов в Photopea

Будучи устанавливаемым PWA , Photopea запускается в отдельном окне, когда пользователь решает установить приложение. Это открывает суперсилу PWA, которую Photopea активно использует: обработку файлов .

Декларативная часть API обработки файлов

После установки Photopea регистрируется в операционной системе в качестве обработчика файлов для различных поддерживаемых форматов файлов. Это происходит в манифесте веб-приложения путем добавления поля file_handlers . Каждый поддерживаемый тип файла является объектом, значением action является относительный URL-адрес, а объектом accept — карта типов MIME и связанных расширений файлов. Например, {"image/jpeg": [".jpeg", ".jpg"]} . Следующий код представляет собой рабочий манифест веб-приложения 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 , установите его на свой рабочий стол, а затем попробуйте открыть один из поддерживаемых им форматов файлов! Удачного редактирования изображений!