Async ক্লিপবোর্ড API-এর জন্য SVG সমর্থন

টেলর গিভেন্স
Taylore Givens
LinkedIn
টমাস স্টেইনার

Async ক্লিপবোর্ড API-এর Clipboard ইন্টারফেস সিস্টেম ক্লিপবোর্ডের বিষয়বস্তু পড়ার এবং লেখার অ্যাক্সেস প্রদান করে। এটি একটি ওয়েব অ্যাপ্লিকেশনকে কাট, কপি এবং পেস্ট বৈশিষ্ট্যগুলি বাস্তবায়ন করতে দেয়। আপনি read() পদ্ধতিতে কল করে একটি অ্যাপ্লিকেশনে ক্লিপবোর্ড থেকে ডেটা পেস্ট করতে পারেন এবং write() পদ্ধতিতে কল করে ক্লিপবোর্ডে ডেটা অনুলিপি করতে পারেন। টেক্সট ছাড়াও, পোর্টেবল নেটওয়ার্ক গ্রাফিক্স (PNG) ফরম্যাটে ছবি , স্যানিটাইজড এবং আনস্যানিটাইজড HTML এবং ওয়েব কাস্টম ফরম্যাট , Async ক্লিপবোর্ড API এখন SVG ইমেজ কপি এবং পেস্ট করাকেও সমর্থন করে, যার মানে আপনি শেষ পর্যন্ত ইমেজ এডিটিং সফ্টওয়্যারের সাথে ইন্টারঅ্যাক্ট করতে পারবেন SVG আরও স্বাভাবিকভাবে SVG ছবিগুলিকে টেক্সট হিসাবে না করে ছবি হিসাবে কপি এবং পেস্ট করে বা হ্যাকি ওয়ার্ক আশেপাশে ব্যবহার করে।

বৈশিষ্ট্য সনাক্ত SVG সমর্থন

স্ট্যাটিক ClipboardItem.supports() পদ্ধতিতে কল করে SVG ইমেজ (এবং অন্য যেকোন MIME প্রকার) জন্য সমর্থন সনাক্ত করুন, এটিকে কাঙ্ক্ষিত MIME প্রকার পাস করুন।

const supportsSVG = () => {
  if (
    !('supports' in window.ClipboardItem) ||
    !window.ClipboardItem.supports('image/svg+xml')
  ) {
    return false;
  }
  return true;
};

একটি SVG ছবি অনুলিপি করুন

ClipboardItem আইটেমকে একটি অবজেক্ট দিয়ে পপুলেট করে একটি SVG ইমেজ কপি করুন। SVG ইমেজ ডেটা সহ ব্লব হল মান এবং ব্লবের ধরন (অর্থাৎ এই ক্ষেত্রে 'image/svg+xml' ) এর কী হিসাবে।

copyButton.addEventListener('click', async () => {
  if (!supportsSVG()) {
    return;
  }
  try {
    const blob = await fetch(img.src).then((response) => response.blob());
    await navigator.clipboard.write([
      new window.ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
  } catch (err) {
    console.error(err.name, err.message);
    alert(err.message);
  }
});

একটি SVG ছবি আটকান

একটি SVG ইমেজ পেস্ট করতে, ক্লিপবোর্ড থেকে ClipboardItem পড়ুন এবং getType() পদ্ধতির সাহায্যে ওয়ান্টেড টাইপ (অর্থাৎ এই ক্ষেত্রে 'image/svg+xml' ) পান। এটি একটি ব্লব প্রদান করে যা একবার একটি ব্লব ইউআরএলে রূপান্তরিত হলে, আপনি একটি <img> এর src অ্যাট্রিবিউটে বরাদ্দ করতে পারেন।

pasteButton.addEventListener('click', async () => {
  if (!supportsSVG()) {
    return;
  }
  const [clipboardItem] = await navigator.clipboard.read();
  const svgBlob = await clipboardItem.getType('image/svg+xml');
  if (!svgBlob) {
    alert('No SVG in the clipboard.');
    return;
  }
  const image = document.createElement('img');
  const blobURL = URL.createObjectURL(svgBlob);
  image.addEventListener('load', () => {
    URL.revokeObjectURL(blobURL);
  });
  image.src = blobURL;
});

স্যানিটাইজেশন

SVG হল একটি শক্তিশালী বিন্যাস যা, উদাহরণস্বরূপ, এমবেডেড স্ক্রিপ্টের অনুমতি দেয়। এটি বিপজ্জনক হতে পারে যখন ব্যবহারকারী অজানা উত্স থেকে সামগ্রী পেস্ট করে, তাই ব্রাউজার একটি স্যানিটাইজেশন পদক্ষেপ চালায়। যখন ডেটা অনুলিপি করা হয়, Async ক্লিপবোর্ড API একটি সুগঠিত SVG নথি তৈরি করে এবং তারপর ক্লিপবোর্ডে এটি লিখে। যখন ডেটা পেস্ট করা হয়, একটি কঠোরভাবে প্রক্রিয়াকৃত SVG খণ্ডটি ফ্র্যাগমেন্ট পার্সার দ্বারা উত্পাদিত হয়। অতএব, পেস্ট অপারেশনের আগে, onclick ইভেন্ট হ্যান্ডলার বৈশিষ্ট্যগুলি এখনও আছে, কিন্তু পেস্ট করার পরে, সেগুলি সরানো হয়।

macOS-এ ক্লিপবোর্ড ভিউয়ার অ্যাপ ক্লিপবোর্ডের বিষয়বস্তু পরিদর্শন করে। এটি দেখায় যে SVG-তে অনক্লিক ইভেন্ট লিসেনার বৈশিষ্ট্যগুলি এখনও রয়েছে৷
macOS-এ ক্লিপবোর্ড ভিউয়ার অ্যাপ ক্লিপবোর্ডের বিষয়বস্তু পরিদর্শন করে। এটি দেখায় যে SVG-তে অনক্লিক ইভেন্ট লিসেনার বৈশিষ্ট্যগুলি এখনও রয়েছে৷

ডেমো

Glitch-এ ডেমোতে SVG কপি এবং পেস্ট করা অন্বেষণ করুন। এটি কিভাবে কাজ করে তা দেখতে সোর্স কোডটি দেখুন। অনুলিপি এবং পেস্ট করার আগে এবং পরে চেনাশোনাগুলির যেকোনো একটিতে ক্লিক করার চেষ্টা করতে ভুলবেন না। পেস্ট করার পরে, সম্ভাব্য বিপজ্জনক onclick ইভেন্ট হ্যান্ডলার বৈশিষ্ট্যগুলি সরানো হয়।

স্বীকৃতি

Chromium-এ Async ক্লিপবোর্ড API-এর জন্য SVG সমর্থন Microsoft Edge টিম দ্বারা বাস্তবায়িত হয়েছে। এই পোস্টটি রাচেল অ্যান্ড্রু এবং অনুপম স্নিগ্ধা দ্বারা পর্যালোচনা করা হয়েছে।