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

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

מבוא

(המאמר הזה זמין גם כסרטון).

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

אפליקציית Photopea.

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

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

החלק ההצהרתי ב-File Treatment 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"]
            }
          ]
        }
    }
}

חלון Finder ב-macOS שבו המשתמש לוחץ לחיצה ימנית על קובץ ובוחר באפשרות 'פתיחה באמצעות' 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, להתקין אותה במחשב ולנסות לפתוח אחד מפורמטים הקבצים הנתמכים בה. עריכת התמונה מהנה!