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

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

Thomas Steiner

Ivan Kutskir

مقدمة

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

Photopea هو محرِّر صور مجاني على الإنترنت تم تطويره من قِبل إيفان كوتسكيرف. بدأ "إيفان" العمل على التطبيق في عام 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"]
            }
          ]
        }
    }
}

الجزء الحاسم من واجهة برمجة التطبيقات File Handling API

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