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

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

תומאס סטיינר

Twitter GitHub Glitch Mastodon דף הבית

איוון קוטסקיר

Twitter GitHub

מבוא

(המאמר הזה זמין גם בצורת סרטון.)

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

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

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

החלק ההצהרתי ב-File Treatment API

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

החלק החשוב ביותר של File Treatment 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 יהיה רכיב handler של קבצים בתמונות, כבר הרבה זמן. בשנת 2020, כשהשאלה הופיעה, לא היה אפשר לחשוב על התכונה הזו, אבל משתמש נלהב גילה את ה-API לטיפול בקבצים בשלבים הראשונים שלו בתחילת 2022, כשהוא עדיין עמד בדגל. הטיפול בקבצים נשלח בסופו של דבר בגרסה 102 של Chrome והפך לפיצ'ר אהוב של Photopea שנעשה בו שימוש על בסיס יומיומי, ומשתמשים מסוימים אפילו קוראים לו כי הוא מחליף את המשחק. כדאי לנסות את Photopea, להתקין אותה במחשב ואז לפתוח את אחד מפורמטים של קבצים שנתמכים בו! בהצלחה בעריכת התמונה!