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

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

Thomas Steiner

Ivan Kutskir

معرفی

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

Photopea یک ویرایشگر تصویر آنلاین رایگان است که توسط Ivan Kutskir توسعه یافته است. ایوان کار بر روی این برنامه را در سال 2012 آغاز کرد و وبلاگی را برای اشتراک‌گذاری ویژگی‌های اصلی که به Photopea اضافه می‌کند، دارد. Photopea می تواند با فرمت های PSD (Adobe Photoshop)، XCF (GIMP)، Sketch (Sketch App)، XD (Adobe XD) و CDR (CorelDRAW) کار کند.

مدیریت فایل در Photopea

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

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

پس از نصب، Photopea خود را به عنوان یک کنترل کننده فایل در سیستم عامل برای فرمت های مختلف فایلی که پشتیبانی می کند ثبت می کند. این با افزودن فیلد file_handlers در مانیفست برنامه وب اتفاق می‌افتد. هر نوع فایل پشتیبانی شده یک شی است، action دارای یک URL نسبی به عنوان مقدار است، شیء accept نقشه ای از انواع MIME و پسوندهای فایل مرتبط است. برای مثال، {"image/jpeg": [".jpeg", ".jpg"]} . کد زیر مانیفست Web App تولیدی 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

سپس بخش ضروری API با مدیریت واقعی فایل(هایی) که سیستم عامل به PWA ارسال می کند، سروکار دارد. کد Photopea بدیهی است که به شدت کوچک و زشت شده است، اما با این وجود درک اصل قطعه زیر چندان سخت نیست. رابط LaunchQueue (که به صورت N کوچک شده است) دارای یک متد setConsumer() است که تابعی را به عنوان آرگومان می پذیرد. این تابع به نوبه خود یک شی LaunchParams (که به صورت W کوچک شده است) می گیرد. این شی LaunchParams دارای یک ویژگی files است که به یک آرایه فقط خواندنی از اشیاء FileSystemHandle اشاره می کند، که بقیه کد سپس روی آن حلقه می زند و برای هر یک با فراخوانی getFile() شی File (که به صورت G کوچک شده است) به دست می آید. سپس این فایل به منطق دیگری در 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، زمانی که این سوال مطرح شد، این ویژگی کاملا غیرقابل تصور بود، اما یک کاربر مشتاق API مدیریت فایل را در ابتدای سال 2022 کشف کرد ، زمانی که هنوز پشت پرچم قرار داشت. مدیریت فایل در نهایت در کروم 102 ارسال شد و یکی از ویژگی‌های دوست‌داشتنی Photopea بوده که به‌طور روزانه توسط کاربرانش مورد استفاده قرار می‌گیرد، حتی برخی آن را تغییر دهنده بازی می‌نامند . حتما Photopea را امتحان کنید ، آن را روی دسکتاپ خود نصب کنید و سپس یکی از فرمت‌های فایلی را که پشتیبانی می‌کند باز کنید! ویرایش تصویر مبارک!