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,将其安装在桌面上,然后尝试打开它支持的文件格式!祝您图片编辑一切顺利!