تسمح واجهة برمجة تطبيقات معالجة الملفات لتطبيقات الويب بتسجيل نفسها كمعالج ملفات لتنسيقات الملفات التي يمكن أن يدعمها التطبيق. تعرف على كيفية استفادة تطبيق تعديل الصور Photopea من واجهة برمجة التطبيقات هذه.
مقدمة
(تتوفر هذه المقالة أيضًا في شكل فيديو).
Photospea هو محرّر صور مجاني على الإنترنت طوّره إيفان كوتسكير. بدأ إيفان العمل على التطبيق في عام 2012، ويحتفظ بمدونة تشارك الميزات الرئيسية التي يضيفها إلى Photopea. يمكن أن يعمل Photopea مع تنسيقات PSD (Adobe Photoshop) وXCF (GIMP) وSketch (Sketch App) وXD (Adobe XD) وCDR (CorelDRAW).
التعامل مع الملفات في Photopea
بما أنّ تطبيق Photopea هو تطبيق ويب تقدّمي قابل للتثبيت، يتم تشغيله في نافذة مستقلّة عندما يختار المستخدم تثبيت التطبيق. يؤدّي ذلك إلى فتح قفل تطبيق الويب التقدّمي (PWA) بشكلٍ قوي، وتستخدِم 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"]
}
]
}
}
}
الجزء الضروري من واجهة برمجة تطبيقات معالجة الملفات
يتعامل الجزء الضروري من واجهة برمجة التطبيقات بعد ذلك مع المعالجة الفعلية للملفات التي يمرّرها نظام التشغيل إلى تطبيق الويب التقدّمي(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]);
});
}
});
}
الاستنتاجات
طلب المستخدمون منذ فترة طويلة أن تصبح ميزة Photospea معالجًا لملفات الصور. عندما ظهر السؤال في عام 2020، لم يكن من الممكن التفكير في هذه الميزة على الإطلاق، إلا أنّ المستخدم المتشوق اكتشف واجهة برمجة التطبيقات لمعالجة الملفات في مراحلها الأولى في بداية عام 2022 عندما كانت لا تزال مرتبطة بعلامة. وفي نهاية المطاف، أصبحت معالجة الملفات في Chrome 102 إحدى ميزات Photopea المفضّلة التي يستخدمها مستخدموها بشكل يومي، حتى أنّ بعضهم أطلق عليها اسم "برنامج تغيير الألعاب". احرص على تجربة تطبيق Photopea وتثبيته على جهاز كمبيوتر سطح المكتب ثم محاولة فتح أحد تنسيقات الملفات المتوافقة مع التطبيق. نتمنى لك قضاء وقت سعيد في تعديل الصور.