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

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 中的檔案處理

由於 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 畫面,使用者在檔案上按一下滑鼠右鍵,然後選擇「以」Photopea「開啟」。

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,並在電腦上安裝這款應用程式,然後嘗試開啟支援的檔案格式!祝您編輯愉快!