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

تسمح واجهة برمجة التطبيقات 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

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