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

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

Thomas Steiner

Ivan Kutskir

מבוא

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

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

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

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

החלק הדקלרטיבי של ה-File Handling 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"]
            }
          ]
        }
    }
}

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