Async Clipboard API के लिए SVG सहायता

Taylore Givens
Taylore Givens
Thomas Steiner
Thomas Steiner

Async Clipboard API के Clipboard इंटरफ़ेस की मदद से, सिस्टम क्लिपबोर्ड के कॉन्टेंट को पढ़ने और उसमें बदलाव करने का ऐक्सेस मिलता है. इसकी मदद से, वेब ऐप्लिकेशन में कट करने, कॉपी करने, और चिपकाने की सुविधाएं लागू की जा सकती हैं. read() तरीके को कॉल करके, क्लिपबोर्ड से किसी ऐप्लिकेशन में डेटा चिपकाया जा सकता है. साथ ही, write() तरीके का इस्तेमाल करके, डेटा को क्लिपबोर्ड में कॉपी किया जा सकता है. Async Clipboard API में इमेज को कॉपी करके चिपकाने की सुविधा उपलब्ध है. इसमें पोर्टेबल नेटवर्क ग्राफ़िक (PNG) फ़ॉर्मैट, साफ़-सुथरे और साफ़ न किए गए एचटीएमएल, और वेब कस्टम फ़ॉर्मैट में मौजूद text इमेज शामिल हैं. इसका मतलब है कि SVG इमेज को कॉपी करके चिपकाने के बजाय, SVG इमेज क�� ��ाथ ��े����र तरीके से इंटरैक्ट करने वाले सॉफ़्टवेयर का इस्तेमाल किया जा सकता है.

SVG सहायता की सुविधा का पता लगाएं

SVG इमेज (और किसी भी दूसरे MIME टाइप) के लिए सहायता का पता लगाने के लिए, स्टैटिक ClipboardItem.supports() तरीके को कॉल करें और उसे मनमुताबिक MIME टाइप दें.

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

SVG इमेज कॉपी करें

किसी SVG इमेज को कॉपी करने के लिए, ClipboardItem में किसी ऑब्जेक्ट की जानकारी भरें. SVG इमेज के डेटा के साथ BLOB, वैल्यू के तौर पर होता है और BLOB का टाइप (इस मामले में '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'). इससे एक ब्लॉब मिलता है, जो एक बार BLOB के यूआरएल में बदल जाने के बाद, आपके पास <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 Clipboard API, सही तरीके से बनाया गया SVG दस्तावेज़ बनाता है और उसे क्लिपबोर्ड पर लिखता है. डेटा चिपकाए जाने के बाद, फ़्रैगमेंट पार्सर, पूरी तरह से प्रोसेस किया गया SVG फ़्रैगमेंट जनरेट करता है. इसलिए, पेस्ट करने की कार्रवाई से पहले, onclick इवेंट हैंडलर एट्रिब्यूट अब भी मौजूद हैं, लेकिन चिपकाने के बाद वे हटा दिए जाएंगे.

macOS पर क्लिपबोर्ड व्यूअर ऐप्लिकेशन, क्लिपबोर्ड के कॉन्टेंट की जांच कर रहा है. इससे पता चलता है कि SVG में onclick इवेंट लिसनर एट्रिब्यूट अब भी मौजूद हैं.
macOS पर क्लिपबोर्ड व्यूअर ऐप्लिकेशन, क्लिपबोर्ड के कॉन्टेंट की जांच कर रहा है. इससे पता चलता है कि SVG में onclick इवेंट लिसनर एट्रिब्यूट अब भी मौजूद हैं.

डेमो

Glitch पर सेट किए गए डेमो में SVG फ़ाइल को कॉपी करने और चिपकाने के बारे में जानें. सोर्स कोड देखकर जानें कि यह कैसे काम करता है. कॉपी करने और चिपकाने से पहले और बाद में किसी भी सर्कल पर क्लिक करना न भूलें. चिपकाने के बाद, संभावित रूप से खतरनाक onclick इवेंट हैंडलर एट्रिब्यूट हटा दिए जाते हैं.

स्वीकार की गई

Microsoft Edge की टीम ने Chromium में, Async Clipboard API के लिए SVG सहायता लागू की थी. इस पोस्ट की समीक्षा, रेचल एंड्रयू और अनुपम स्निग्धा ने की है.