File Handling API 允许 Web 应用将自己注册为应用支持的文件格式的文件处理程序。了解图片编辑应用 Photopea 如何使用此 API。
简介
（本文也可以视频的形式提供。）
Photopea 是由 Ivan Kutskir 开发的免费在线图片编辑器。Ivan 从 2012 年开始开发这款应用，并维护着一个博客，分享了他为 Photopea 添加的主要功能。Photopea 支持 PSD (Adobe Photoshop)、XCF (GIMP)、Sketch（Sketch 应用）、XD (Adobe XD) 和 CDR (CorelDRAW) 格式。
Photopea 中的文件处理
作为可安装的 PWA，当用户选择安装应用时，Photospea 会在独立窗口中运行。这样做会解锁 PWA 的超能力，而 Photopea 会大量利用文件处理功能。
File Handling API 的声明性部分
安装后，Photospea 会在操作系统中将自己注册为文件处理程序，以处理其支持的不同文件格式。此操作在 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"]
}
]
}
}
}
File Handling 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，将其安装在桌面上，然后尝试打开它支持的文件格式！祝您图片编辑一切顺利！