图片编辑应用 Photopea 如何使用 File Handling API 允许用户从文件资源管理器打开文件

借助 File Handling API，Web 应用可以注册为自身支持的文件格式的文件处理程序。了解图片编辑应用 Photopea 如何使用此 API。

Thomas Steiner
Ivan Kutskir
Ivan Kutskir
X GitHub

简介

（本文也以视频形式提供。）

Photopea 是由 Ivan Kutskir 开发的一款免费在线图片编辑器。Ivan 于 2012 年开始开发这款应用，并维护着一个博客，分享他为 Photopea 添加的主要功能。Photopea 支持 PSD (Adobe Photoshop)、XCF (GIMP)、Sketch (Sketch App)、XD (Adobe XD) 和 CDR (CorelDRAW) 格式。

Photopea 应用。

Photopea 中的文件处理

作为可安装的 PWA，当用户选择安装该应用时，Photopea 会在独立窗口中运行。这样做可以解锁 PWA 的一项强大功能，Photopea 充分利用了这项功能：文件处理。

File Handling API 的声明式部分

安装后，Photopea 会向操作系统注册为文件处理程序，以支持不同的文件格式。这可以通过在 Web 应用清单中添加 file_handlers 字段来实现。每种受支持的文件类型都是一个对象，action 的值为相对网址，accept 对象是 MIME 类型和关联文件扩展名的映射。例如 {"image/jpeg": [".jpeg", ".jpg"]}。以下代码是 Photopea 的生产 Web 应用清单，其中突出显示了相关部分。

{
    "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"]
            }
          ]
        }
    }
}

macOS Finder，用户右键点击文件，然后选择“打开方式”Photopea。

文件处理 API 的命令式部分

然后，API 的命令式部分会处理操作系统传递给 PWA 的文件。Photopea 的代码显然经过了大量缩减和丑化，但以下代码段的要点并不难理解。LaunchQueue 接口（缩减为 N）具有 setConsumer() 方法，该方法接受一个函数作为参数。此函数又会接受一个 LaunchParams 对象（缩减为 W）。此 LaunchParams 对象具有一个 files 属性，该属性指向一个由 FileSystemHandle 对象组成的只读数组，其余代码会循环遍历该数组，并通过调用 getFile() 获取每个对象的 File 对象（缩减为 G）。然后，此文件会传递给 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 年，当这个问题出现时，这一功能完全不可想象，但一位热心的用户在 2022 年初发现了文件处理 API，当时它还处于早期阶段，仍处于标志后面。文件处理功能最终在 Chrome 102 中发布，并成为 Photopea 用户每天都会使用的备受喜爱的功能，甚至有人称其为颠覆性功能。请务必试用 Photopea，将其安装到您的桌面设备上，然后尝试打开它支持的文件格式之一！祝您修图愉快！