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 的正式版網頁應用程式資訊清單，其中相關部分已加以醒目標示。
{
"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，在電腦上安裝這款應用程式，然後嘗試開啟支援的檔案格式！祝您編輯愉快！