圖片編輯應用程式 Photopea 如何使用 File Handling API 讓使用者透過檔案探索工具開啟檔案

File Handling API 可讓網頁應用程式自行註冊為檔案處理常式，處理應用程式支援的檔案格式。瞭解圖片編輯應用程式 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 的檔案處理

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

macOS Finder，使用者在檔案上按一下滑鼠右鍵，然後選擇「Open with」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，當時該 API 仍處於早期階段，且仍處於標記狀態。檔案處理功能最終在 Chrome 102 中推出，並成為 Photopea 使用者每天使用的熱門功能，甚至有人稱其為顛覆性功能。請務必試用 Photopea，將其安裝到電腦上，然後嘗試開啟支援的檔案格式！祝您編輯圖片愉快！