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

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

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

SVG फ़ाइल फ़ॉर्मैट में काम करने वाली सुविधाओं का पता लगाना

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

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

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

किसी ऑब्जेक्ट की मदद से, ClipboardItem को पॉप्युलेट करके, SVG इमेज कॉपी करें. SVG इमेज डेटा वाला ब्लॉब, वैल्यू है और ब्लॉब का टाइप (इस मामले में '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') पाएं. इससे एक ब्लॉब मिलता है, जिसे ब्लॉब यूआरएल में बदलने के बाद, <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;
});

डेटा को सुरक्षित करना

एसवीजी एक बेहतरीन फ़ॉर्मैट है. उदाहरण के लिए, इसमें एम्बेड की गई स्क्रिप्ट इस्तेमाल की जा सकती हैं. जब उपयोगकर्ता किसी ऐसे सोर्स से कॉन्टेंट चिपकाता है जिसके बारे में उसे जानकारी नहीं है, तो यह खतरनाक हो सकता है. इसलिए, ब्राउज़र कॉन्टेंट को सुरक्षित बनाने की प्रोसेस करता है. डेटा कॉपी होने पर, Async Clipboard API एक सही तरीके से फ़ॉर्मैट किया गया SVG दस्तावेज़ बनाता है और फिर उसे क्लिपबोर्ड पर लिखता है. डेटा चिपकाने पर, फ़्रैगमेंट पार्स करने वाले टूल से, ज़रूरत के हिसाब से प्रोसेस किया गया एसवीजी फ़्रैगमेंट बनता है. इसलिए, चिपकाने की कार्रवाई से पहले, onclick इवेंट हैंडलर के एट्रिब्यूट अब भी मौजूद होते हैं. हालांकि, चिपकाने के बाद, वे हट जाते हैं.

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

डेमो

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

आभार

Microsoft Edge की टीम ने, Chromium में एसिंक्रोनस क्लिपबोर्ड एपीआई के लिए एसवीजी की सुविधा लागू की है. इस पोस्ट की समीक्षा, रायचेल एंड्रयू और अनुपम स्निग्धा ने की है.