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

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

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

আধুনিক উপায়

Async ক্লিপবোর্ড API ব্যবহার করে

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

ব্রাউজার সমর্থন

  • 66
  • 79
  • 13.1

উৎস

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

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

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

ব্রাউজার সমর্থন

  • 66
  • 79
  • 63
  • 13.1

উৎস

প্রগতিশীল বর্ধিতকরণ

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);
  }
});