איך אפליקציית Photopea לעריכת תמונות משתמשת ב-File Treatment API כדי לאפשר למשתמשים לפתוח קבצים מסייר הקבצים שלהם

‫File Handling API מאפשר לאפליקציות אינטרנט לרשום את עצמן כ-handler של קבצים בפורמטים שהאפליקציה יכולה לתמוך בהם. איך אפליקציית עריכת התמונות Photopea משתמשת ב-API הזה.

מבוא

(המאמר הזה זמין גם בפורמט של סרטון).

‫Photopea הוא כלי חינמי אונליין לעריכת תמונות שפותח על ידי איוון קוטסקיר. איוון התחיל לעבוד על האפליקציה ב-2012, והוא מנהל בלוג שבו הוא משתף את התכונות העיקריות שהוא מוסיף ל-Photopea. האפליקציה Photopea יכולה לעבוד עם הפורמטים PSD (Adobe Photoshop),‏ XCF (GIMP),‏ Sketch (Sketch App),‏ XD (Adobe XD) ו-CDR (CorelDRAW).

אפליקציית Photopea.

טיפול בקבצים ב-Photopea

כאפליקציית PWA שניתנת להתקנה, Photopea פועלת בחלון נפרד כשהמשתמש בוחר להתקין את האפליקציה. כך אפשר להשתמש בתכונה חשובה של PWA, ש-Photopea משתמשת בה הרבה: טיפול בקבצים.

החלק ההצהרתי של API לטיפול בקבצים

אחרי ההתקנה, Photopea רושמת את עצמה כמטפלת בקבצים במערכת ההפעלה, בפורמטים השונים של הקבצים שבהם היא תומכת. כדי לעשות את זה, מוסיפים את השדה file_handlers לקובץ המניפסט של אפליקציית האינטרנט. כל סוג קובץ נתמך הוא אובייקט, ל-action יש כתובת URL יחסית כערך, והאובייקט 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.

החלק ההכרחי של טיפול בקבצים API

החלק ההכרחי של ה-API מטפל בפועל בקבצים שמערכת ההפעלה מעבירה ל-PWA. הקוד של Photopea כמובן ממוזער ומעוות מאוד, אבל עדיין לא קשה להבין את מהות קטע הקוד שבהמשך. לממשק LaunchQueue (ממוזער כ-N) יש שיטה setConsumer(), שמקבלת פונקציה כארגומנט. הפונקציה הזו מקבלת אובייקט LaunchParams (ממוזער כ-W) . לאובייקט LaunchParams הזה יש מאפיין files שמצביע על מערך לקריאה בלבד של אובייקטים מסוג FileSystemHandle. שאר הקוד עובר על המערך הזה בלולאה, ובכל פעם מקבל את האובייקט File (ממוזער כ-G) על ידי קריאה ל-getFile(). לאחר מכן, הקובץ הזה מועבר ללוגיקה אחרת ב-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, כשהשאלה הופיעה, התכונה הזו הייתה בלתי נתפסת, אבל משתמש נלהב גילה את ה-API לטיפול בקבצים בשלבים המוקדמים ביותר שלו בתחילת 2022, כשהוא עדיין היה מאחורי דגל. הטיפול בקבצים הושק בסופו של דבר ב-Chrome 102 והפך לתכונה אהובה ב-Photopea, שהמשתמשים משתמשים בה מדי יום, וחלקם אפילו מכנים אותה "משנה את כללי המשחק". נסו את Photopea, התקינו אותה במחשב ונסו לפתוח קובץ באחד מהפורמטים שהיא תומכת בהם. עריכת תמונות מהנה!