「File Handling API」可讓網頁應用程式自行註冊為檔案處理常式，以便提供應用程式支援的檔案格式。瞭解相片編輯應用程式 Photopea 如何運用這個 API。
簡介
(這篇文章也可以影片的形式提供)。
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 會根據支援的各種檔案格式，向作業系統註冊為檔案處理常式。在網頁應用程式資訊清單中加上 file_handlers 欄位，即可完成這項操作。每個支援的檔案類型都是一個物件，action 的值都有相對網址，而 accept 物件是 MIME 類型的對應以及相關聯的副檔名。例如：{"image/jpeg": [".jpeg", ".jpg"]}。下列程式碼是 Photopea 生產環境的 Web App Manifest，並醒目顯示相關部分。
{
"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 物件具有指向 FileSystemHandle 物件的唯讀陣列，其中其餘程式碼會在呼叫 getFile() 並循環播放，並針對每個物件循環取得 File 物件 (最小化為 G)。files接著，這個檔案會傳遞至 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 仍在 2022 年初時，卻仍在標記中。檔案處理功能最終是在 Chrome 第 102 版推出，也是廣受使用者喜愛的 Photopea 功能，有些甚至稱之為扭轉器。請務必試用 Photopea，然後在電腦上安裝，然後嘗試開啟其中一種支援的檔案格式！祝你編輯愉快！