نحوه استفاده برنامه ویرایش تصویر Photopea از File Handling API برای اینکه کاربران بتوانند فایل‌ها را از کاوشگر فایل خود باز کنند

‫File Handling API به برنامه‌های وب اجازه می‌دهد خود را به‌عنوان رسیدگی‌کننده فایل برای قالب‌های فایلی که برنامه می‌تواند پشتیبانی کند ثبت کنند. با نحوه استفاده برنامه ویرایش تصویر Photopea از این API آشنا شوید.

مقدمه

(این مقاله به‌صورت ویدیو نیز دردسترس است.)

Photopea ویرایشگر تصویر آنلاین رایگانی است که ایوان کوتسکیر آن را توسعه داده است. ایوان کار روی این برنامه را در سال ۲۰۱۲ شروع کرد و وبلاگی را اداره می‌کند که در آن ویژگی‌های اصلی‌ای را که به Photopea اضافه می‌کند هم‌رسانی می‌کند. Photopea می‌تواند با قالب‌های PSD (Adobe Photoshop)،‏ XCF (GIMP)،‏ Sketch (Sketch App)،‏ XD (Adobe XD)، و CDR (CorelDRAW) کار کند.

برنامه Photopea.

اداره کردن فایل در Photopea

Photopea به‌عنوان یک برنامه وب پیش‌رونده نصب‌شدنی، وقتی کاربر تصمیم می‌گیرد برنامه را نصب کند، در پنجره‌ای مستقل اجرا می‌شود. با انجام این کار، یک قدرت فوق‌العاده برنامه وب پیش‌رونده باز می‌شود که Photopea به‌شدت از آن استفاده می‌کند: اداره کردن فایل.

بخش اعلانی File Handling API

پس‌از نصب، Photopea خودش را به‌عنوان گرداننده فایل با سیستم‌عامل برای قالب‌های فایل مختلفی که پشتیبانی می‌کند ثبت می‌کند. این کار در مانیفست برنامه وب با افزودن فیلد file_handlers انجام می‌شود. هر نوع فایل پشتیبانی‌شده یک شیء است، action یک نشانی وب نسبی به‌عنوان مقدار خود دارد، شیء 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"]
            }
          ]
        }
    }
}

macOS Finder با کاربری که روی فایلی کلیک راست می‌کند و سپس «باز کردن با» Photopea را انتخاب می‌کند.

بخش ضروری 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 به گرداننده فایل برای تصاویر تبدیل شود. در سال ۲۰۲۰، زمانی که این سؤال مطرح شد، این ویژگی کاملاً غیرقابل تصور بود، اما یک کاربر مشتاق، میانای برنامه‌سازی کاربردی اداره کردن فایل را در مراحل اولیه آن در ابتدای سال ۲۰۲۲، زمانی که هنوز پشت پرچم بود، کشف کرد. اداره کردن فایل درنهایت در Chrome 102 عرضه شد و یکی از ویژگی‌های محبوب Photopea بوده است که کاربران آن به‌طور روزانه از آن استفاده می‌کنند، برخی حتی آن را تحول‌آفرین می‌نامند. حتماً Photopea را امتحان کنید، آن را در رایانه‌تان نصب کنید، و سپس یکی از قالب‌های فایل پشتیبانی‌شده را باز کنید! از ویرایش تصویر لذت ببرید!