इमेज चिपकाने का तरीका

हैरी थेओडोलू
हैरी थियोडोलू
Twitter होम पेज

आधुनिक तरीका

Async Clipboard API का इस्तेमाल करना

लोगों के क्लिपबोर्ड से, प्रोग्राम के हिसाब से, इमेज को पढ़ने के लिए, एक बटन पर क्लिक करने के बाद, Async Clipboard API के read() तरीके का इस्तेमाल किया जा सकता है. अगर क्लिपबोर्ड से पढ़ने की अनुमति अब तक नहीं दी गई है, तो इस तरीके का इस्तेमाल करने पर, navigator.clipboard.read() को किए गए कॉल से इसका अनुरोध किया जाएगा.

const pasteButton = document.querySelector('#paste-button');

pasteButton.addEventListener('click', async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      const imageTypes = clipboardItem.types.find(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        const blob = await clipboardItem.getType(imageType);
        // Do something with the image blob.
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

ब्राउज़र सहायता

  • 86
  • 79
  • 13.1

सोर्स

क्लासिक तरीका

paste इवेंट के लिए सुनें

इमेज चिपकाने का क्लासिक तरीका, (सिंक्रोनस) Clipboard API का इस्तेमाल करना है. इससे आपको दस्तावेज़: paste इवेंट में मौजूद clipboardData फ़ील्ड का ऐक्सेस मिलता है. हालांकि, इस तरीके में कुछ सीमाएं हैं. उदाहरण के लिए, यह सिंक्रोनस होने की वजह से, ज़्यादा डेटा चिपकाने से पेज ब्लॉक हो सकता है.

document.addEventListener('paste', async (e) => {
  e.preventDefault();

  for (const clipboardItem of e.clipboardData.files) {
    if (clipboardItem.type.startsWith('image/')) {
      // Do something with the image file.
    }
  }
});

ब्राउज़र सहायता

  • 66
  • 79
  • 63
  • 13.1

सोर्स

प्रोग्रेसिव एन्हैंसमेंट

Async Clipboard API पर काम न करने वाले ब्राउज़र के लिए, प्रोग्राम के हिसाब से उपयोगकर्ता के क्लिपबोर्ड को ऐक्सेस करना संभव नहीं है, जैसे कि किसी बटन पर क्लिक करने पर. इसलिए, paste इवेंट में किसी उपयोगकर्ता का क्लिपबोर्ड ऐक्सेस करने के लिए, Async Clipboard API का इस्तेमाल किया जा सकता है. इसके बाद, (सिंक्रोनस) क्लिपबोर्ड एपीआई पर वापस आया जा सकता है.

navigator.clipboard.read से आने वाले ClipboardItem ऑब्जेक्ट में types फ़ील्ड है, जो एक श्रेणी है और event.clipboardData.files से आने वाले File ऑब्जेक्ट में एक type फ़ील्ड है, जो एक स्ट्रिंग है. क्लिपबोर्ड में मौजूद इमेज के लिए, type या types फ़ील्ड की कुछ शर्तों के साथ जांच की जा सकती है:

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;

  for (const clipboardItem of clipboardItems) {
    let blob;
    if (clipboardItem.type?.startsWith('image/')) {
      // For files from `e.clipboardData.files`.
      blob = clipboardItem
      // Do something with the blob.
    } else {
      // For files from `navigator.clipboard.read()`.
      const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        blob = await clipboardItem.getType(imageType);
        // Do something with the blob.
      }
    }
  }
});

इसके बारे में और पढ़ें

  • एमडीएन पर क्लिपबोर्ड एपीआई
  • web.dev पर क्लिपबोर्ड का ऐक्सेस अनब्लॉक करना

डेमो

एचटीएमएल

<!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 paste images</title>
  </head>
  <body>
    <h1>How to paste images</h1>
    <p>Hit <kbd>⌘</kbd> + <kbd>v</kbd> (for macOS) or <kbd>ctrl</kbd> + <kbd>v</kbd>
      (for other operating systems) to paste images anywhere in this page.
    </p>
  </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


        document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;

  for (const clipboardItem of clipboardItems) {
    let blob;
    if (clipboardItem.type?.startsWith('image/')) {
      // For files from `e.clipboardData.files`.
      blob = clipboardItem
      // Do something with the blob.
      appendImage(blob);
    } else {
      // For files from `navigator.clipboard.read()`.
      const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        blob = await clipboardItem.getType(imageType);
        // Do something with the blob.
        appendImage(blob);
      }
    }
  }
});

const appendImage = (blob) => {
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  document.body.append(img);
};