इमेज कॉपी करने का तरीका

थॉमस स्टाइनर
थॉमस स्टाइनर
Twitter GitHub Glitch होम पेज

कई आधुनिक ब्राउज़र इमेज को PNG और SVG फ़ॉर्मैट में क्लिपबोर्ड पर कॉपी करने की सुविधा देते हैं. सुरक्षा से जुड़ी वजहों से, अन्य फ़ॉर्मैट फ़िलहाल काम नहीं करते.

आधुनिक तरीका

Async Clipboard 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>

CSS


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

JS


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