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

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

ভূমিকা

(এই নিবন্ধটি ভিডিও হিসেবেও উপলভ্য।)

Photopea হল একটি ফ্রি অনলাইন ইমেজ এডিটর যা Ivan Kutskir ডেভেলপ করেছেন। ইভান ২০১২ সালে অ্যাপটি নিয়ে কাজ শুরু করেন এবং Photopea-তে যোগ করা প্রধান ফিচারগুলি শেয়ার করার জন্য একটি ব্লগ পরিচালনা করেন। Photopea, PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) এবং CDR (CorelDRAW) ফর্ম্যাটের সাথে কাজ করতে পারে।

Photopea অ্যাপ।

Photopea-তে ফাইল হ্যান্ডেল করা

ইনস্টলযোগ্য PWA হিসেবে, ব্যবহারকারী অ্যাপ ইনস্টল করার বিকল্প বেছে নিলে Photopea একটি স্বতন্ত্র উইন্ডোতে চলে। এটি করলে PWA-এর একটি সুপার পাওয়ার আনলক হয়, যা 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"]
            }
          ]
        }
    }
}

macOS Finder-এ ব্যবহারকারী কোনও ফাইলে রাইট-ক্লিক করে 'Photopea-এর মাধ্যমে খুলুন' বিকল্প বেছে নিচ্ছেন।

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