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

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

कॉन्टेंट बनाने इसका Clipboard इंटरफ़ेस एसिंक्रोनस क्लिपबोर्ड एपीआई, सिस्टम क्लिपबोर्ड. इसकी मदद से वेब ऐप्लिकेशन को कट, कॉपी, और सुविधाएं चिपकाएं. आप क्लिपबोर्ड से डेटा को किसी ऐप्लिकेशन में चिपका सकते हैं: कॉल करो read() तरीका, और क्लिपबोर्ड पर डेटा कॉपी करने के लिए, write() तरीका. text के अलावा, पोर्टेबल नेटवर्क में इमेज ग्राफ़िक (PNG) फ़ॉर्मैट में, सैनिटाइज़ किए गए और सैनिटाइज़ नहीं किया गया एचटीएमएल, और वेब कस्टम फ़ॉर्मैट, Async Clipboard API, अब SVG इमेज को कॉपी करने और चिपकाने की सुविधा भी देता है, इसका मतलब है कि आखिर में, इमेज में बदलाव करने वाले ऐसे सॉफ़्टवेयर का इस्तेमाल किया जा सकता है जो 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 इमेज कॉपी करें

अपने-आप जनरेट होने वाले विकल्प की मदद से, 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 को वापस पढ़ें और को पाने के लिए'image/svg+xml' getType() तरीका. यह एक BLOB दिखाता है, जो एक बार 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 एक बेहतरीन फ़ॉर्मैट है. एम्बेड की गई स्क्रिप्ट के लिए, इस फ़ॉर्मैट का इस्तेमाल किया जा सकता है. यह काम किया जा सकता है जब उपयोगकर्ता अनजान सोर्स से कॉन्टेंट चिपकाता है, तो खतरनाक होता है, इसलिए ब्राउज़र एक सैनिटाइज़ेशन चरण चलाता है. डेटा कॉपी होने पर, एसिंक्रोनस क्लिपबोर्ड एपीआई एक सही SVG दस्तावेज़ बनाता है और फिर उसे क्लिपबोर्ड पर लिख देता है. टास्क कब शुरू होगा डेटा चिपकाया जाता है और पूरी तरह से प्रोसेस किया गया SVG फ़्रैगमेंट, फ़्रैगमेंट से बनता है पार्सर. इसलिए, चिपकाने की कार्रवाई से पहले, onclick इवेंट हैंडलर एट्रिब्यूट अब भी मौजूद हैं, लेकिन चिपकाने के बाद हटा दिए जाते हैं.

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

डेमो

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

स्वीकार की गई

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