كيفية استخدام تطبيق تعديل الصور Photopea لواجهة برمجة التطبيقات File Handling API للسماح للمستخدمين بفتح الملفات من مستكشف الملفات

تتيح واجهة برمجة تطبيقات معالجة الملفات لتطبيقات الويب تسجيل نفسها كمعالِج لتنسيقات الملفات التي يمكن للتطبيق التعامل معها. تعرَّف على كيفية استخدام تطبيق تعديل الصور Photopea لواجهة برمجة التطبيقات هذه.

مقدمة

(تتوفّر هذه المقالة أيضًا على شكل فيديو).

‫Photopea هو محرّر صور مجاني على الإنترنت طوّره إيفان كوتسكير. بدأ "إيفان" العمل على التطبيق في عام 2012، ولديه مدوّنة يشارك فيها الميزات الرئيسية التي يضيفها إلى Photopea. يمكن أن يعمل Photopea مع تنسيقات PSD (Adobe Photoshop) وXCF (GIMP) وSketch (Sketch App) وXD (Adobe XD) وCDR (CorelDRAW).

تطبيق Photopea

معالجة الملفات في Photopea

بما أنّ Photopea تطبيق ويب تقدّمي قابل للتثبيت، يتم تشغيله في نافذة مستقلة عندما يختار المستخدم تثبيته، ما يتيح له الاستفادة من ميزة رائعة في تطبيقات الويب التقدّمية، وهي معالجة الملفات، والتي يعتمد عليها Photopea بشكل كبير.

الجزء التعريفي من واجهة برمجة تطبيقات معالجة الملفات

بعد التثبيت، يسجّل 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 مع مستخدم ينقر بزر الماوس الأيمن على ملف ثم يختار "فتح باستخدام" (Open with) Photopea

الجزء الإلزامي من واجهة برمجة تطبيقات معالجة الملفات

يتعامل الجزء الإلزامي من واجهة برمجة التطبيقات بعد ذلك مع معالجة الملفات التي يمررها نظام التشغيل إلى تطبيق الويب التقدّمي. من الواضح أنّ رمز 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، عندما ظهر السؤال، كانت هذه الميزة غير واردة على الإطلاق، ولكن اكتشف أحد المستخدمين المتحمسين واجهة برمجة التطبيقات لمعالجة الملفات في مراحلها الأولى في بداية عام 2022 عندما كانت لا تزال وراء علامة. تم إطلاق ميزة معالجة الملفات في الإصدار 102 من Chrome، وأصبحت ميزة مفضّلة في Photopea يستخدمها المستخدمون يوميًا، حتى أنّ البعض وصفها بأنّها ميزة ثورية. احرص على تجربة Photopea وتثبيته على الكمبيوتر المكتبي، ثم حاوِل فتح أحد تنسيقات الملفات المتوافقة معه. نتمنى لك تجربة ممتعة في تعديل الصور.