কিভাবে ছবি কপি করবেন

টমাস স্টেইনার

অনেক আধুনিক ব্রাউজার PNG এবং SVG ফরম্যাটে ক্লিপবোর্ডে ছবি কপি করা সমর্থন করে। নিরাপত্তাজনিত কারণে অন্যান্য ফরম্যাট এখনও সমর্থিত নয়।

আধুনিক উপায়

অ্যাসিঙ্ক ক্লিপবোর্ড এপিআই ব্যবহার করে

Clipboard.write() মেথডটি ClipboardItem অবজেক্টের একটি অ্যারে গ্রহণ করে এবং একটি Promise রিটার্ন করে, যা ছবিটি সফলভাবে ক্লিপবোর্ডে লেখা হলে রিজলভ হয়। Clipboard.write() শুধুমাত্র ফোকাস থাকা window অবজেক্ট থেকেই ব্যবহার করা যায়।

Browser Support

  • ক্রোম: ৭৬।
  • প্রান্ত: ৭৯।
  • ফায়ারফক্স: ১২৭।
  • সাফারি: ১৩.১।

Source

ক্লাসিক উপায়

navigator.clipboard.writeText() ব্যবহার করে

যদিও সব ব্রাউজার এখনও বাইনারি ডেটার জন্য navigator.clipboard.write() সমর্থন করে না, তারা সবাই navigator.clipboard.writeText() সমর্থন করে। আপনি যদি একটি SVG ইমেজ কপি করতে চান, তবে সরাসরি ইমেজটি কপি না করে, আপনি SVG সোর্স কোডটি কপি করতে পারেন। দুর্ভাগ্যবশত, PNG ইমেজের ক্ষেত্রে আপনার জন্য কোনো উপায় নেই।

Browser Support

  • ক্রোম: ৬৬।
  • প্রান্ত: ৭৯।
  • ফায়ারফক্স: ৬৩।
  • সাফারি: ১৩.১।

Source

প্রগতিশীল উন্নয়ন 

const button = document.querySelector('button');
const img = document.querySelector('img');

button.addEventListener('click', async () => {
  const responsePromise = fetch(img.src);
  try {
    if ('write' in navigator.clipboard) {
      await navigator.clipboard.write([
        new ClipboardItem({
          'image/svg+xml': new Promise(async (resolve) => {
            const blob = await responsePromise.then(response => response.blob());
            resolve(blob);
          }),
        }),
      ]);
      // Image copied as image.
    } else {
      const text = await responsePromise.then(response => response.text());
      await navigator.clipboard.writeText(text);
      // Image copied as source code.
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

আরও পড়ুন

ডেমো

এইচটিএমএল 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to copy images</title>
  </head>
  <body>
    <h1>How to copy images</h1>
    <img src="assets/fugu.svg" alt="Fugu fish." width="128" height="128">
    <button type="button">Copy</button>
  </body>
</html>

সিএসএস 


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

button {
  display: block;
}

জেএস 


        const button = document.querySelector('button');
const img = document.querySelector('img');

button.addEventListener('click', async () => {
  const responsePromise = fetch(img.src);

  try {
    if ('write' in navigator.clipboard) {
      await navigator.clipboard.write([
        new ClipboardItem({
          'image/svg+xml': new Promise(async (resolve) => {
            const blob = await responsePromise.then(response => response.blob());
            resolve(blob);
          }),
        }),
      ]);
      // Image copied as image.
    } else {
      const text = await responsePromise.then(response => response.text());
      await navigator.clipboard.writeText(text);
      // Image copied as source code.
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});