কিভাবে ইমেজ এডিটিং অ্যাপ Photopea ফাইল হ্যান্ডলিং এপিআই ব্যবহার করে ব্যবহারকারীদের তাদের ফাইল এক্সপ্লোরার থেকে ফাইল খুলতে দেয়

ফাইল হ্যান্ডলিং এপিআই ওয়েব অ্যাপ্লিকেশনগুলিকে ফাইল ফর্ম্যাটগুলির জন্য ফাইল হ্যান্ডলার হিসাবে নিজেদের নিবন্ধন করতে দেয় যা অ্যাপ্লিকেশন সমর্থন করতে পারে। ছবি সম্পাদনা অ্যাপ্লিকেশন Photopea কিভাবে এই API ব্যবহার করে তা জানুন।

ভূমিকা

(এই নিবন্ধটি একটি ভিডিও আকারে উপলব্ধ।)

ফটোপিয়া হল একটি বিনামূল্যের অনলাইন ইমেজ এডিটর যা ইভান কুটস্কির তৈরি করেছেন। ইভান 2012 সালে অ্যাপটিতে কাজ করা শুরু করে এবং ফটোপেয়াতে যোগ করা প্রধান বৈশিষ্ট্যগুলি শেয়ার করে একটি ব্লগ বজায় রাখে। Photopea PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD), এবং CDR (CorelDRAW) ফর্ম্যাটের সাথে কাজ করতে পারে।

Photopea অ্যাপ।

Photopea এ ফাইল হ্যান্ডলিং

একটি ইনস্টলযোগ্য PWA হিসাবে, ব্যবহারকারী যখন অ্যাপটি ইনস্টল করতে চান তখন ফটোপিয়া একটি স্বতন্ত্র উইন্ডোতে চলে। এটি করার ফলে একটি PWA সুপার পাওয়ার আনলক হয়ে যায়, যা ফটোপিয়া ব্যাপকভাবে ব্যবহার করে: ফাইল হ্যান্ডলিং

ফাইল হ্যান্ডলিং API-এর ঘোষণামূলক অংশ

ইনস্টলেশনের পরে, ফটোপিয়া এটি সমর্থন করে এমন বিভিন্ন ফাইল ফর্ম্যাটের জন্য অপারেটিং সিস্টেমের সাথে একটি ফাইল হ্যান্ডলার হিসাবে নিজেকে নিবন্ধন করে। file_handlers ক্ষেত্র যোগ করে এটি ওয়েব অ্যাপ ম্যানিফেস্টে ঘটে। প্রতিটি সমর্থিত ফাইলের ধরন একটি অবজেক্ট, action মান হিসাবে একটি আপেক্ষিক URL আছে, accept বস্তুটি MIME প্রকারের একটি মানচিত্র এবং সংশ্লিষ্ট ফাইল এক্সটেনশন। উদাহরণস্বরূপ, {"image/jpeg": [".jpeg", ".jpg"]} । নিম্নলিখিত কোডটি ফটোপিয়ার প্রোডাকশন ওয়েব অ্যাপ ম্যানিফেস্ট , প্রাসঙ্গিক অংশগুলি হাইলাইট করে।

{
    "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"]
            }
          ]
        }
    }
}

ব্যবহারকারীর সাথে ম্যাকওএস ফাইন্ডার একটি ফাইলে ডান-ক্লিক করে এবং তারপর ফটোপিয়ার সাথে 'ওপেন' নির্বাচন করে।

ফাইল হ্যান্ডলিং API এর অপরিহার্য অংশ

এপিআই-এর অপরিহার্য অংশটি অপারেটিং সিস্টেম পিডব্লিউএ-তে পাস করা ফাইল(গুলি) বাস্তবিকভাবে পরিচালনা করে। ফটোপিয়ার কোড স্পষ্টতই প্রচণ্ডভাবে ছোট এবং কুশ্রী, কিন্তু তবুও নীচের স্নিপেটের সারাংশ বোঝা এতটা কঠিন নয়। LaunchQueue ইন্টারফেস ( N হিসাবে সংক্ষিপ্ত) এর একটি setConsumer() পদ্ধতি রয়েছে, যা একটি ফাংশনকে একটি যুক্তি হিসাবে গ্রহণ করে। এই ফাংশনটি পালাক্রমে একটি LaunchParams অবজেক্ট নেয় ( W হিসাবে ছোট করা হয়)। এই LaunchParams অবজেক্টটিতে একটি files প্রোপার্টি রয়েছে যা FileSystemHandle অবজেক্টের একটি পঠনযোগ্য অ্যারের দিকে নির্দেশ করে, যেটি কোডের বাকি অংশটি লুপ হয়ে যায় এবং প্রতিটির জন্য getFile() কল করে File অবজেক্ট ( G হিসাবে ছোট করা) প্রাপ্ত হয়। এই ফাইলটি ফটোপিয়ার অন্যান্য যুক্তিতে পাঠানো হয় যা ফাইলটি প্রদর্শনের যত্ন নেয়।

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 এর শুরুতে ফাইল হ্যান্ডলিং API আবিষ্কার করেছিলেন যখন এটি এখনও একটি পতাকার পিছনে ছিল। ফাইল হ্যান্ডলিং শেষ পর্যন্ত Chrome 102-এ পাঠানো হয়েছে এবং এটির ব্যবহারকারীদের দ্বারা প্রতিদিন ব্যবহৃত একটি প্রিয় ফটোপিয়া বৈশিষ্ট্য হয়েছে, কেউ কেউ এটিকে গেমচেঞ্জারও বলেPhotopea কে চেষ্টা করে দেখতে ভুলবেন না, এটি আপনার ডেস্কটপে ইনস্টল করুন, এবং তারপর এটি সমর্থন করে এমন একটি ফাইল ফর্ম্যাট খোলার চেষ্টা করুন! শুভ ইমেজ সম্পাদনা!