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
इवेंट हैंडलर एट्रिब्यूट अब भी मौजूद हैं, लेकिन चिपकाने के बाद वे हटा दिए जाएंगे.
डेमो
Glitch पर सेट किए गए डेमो में SVG फ़ाइल को कॉपी करने और चिपकाने के बारे में जानें. सोर्स कोड देखकर जानें कि यह कैसे काम करता है. कॉपी करने और चिपकाने से पहले और बाद में
किसी भी सर्कल पर क्लिक करना न भूलें. चिपकाने के बाद, संभावित रूप से खतरनाक onclick
इवेंट हैंडलर एट्रिब्यूट हटा दिए जाते हैं.
इसी विषय से जुड़े कुछ लिंक
- इस सुविधा का इस्तेमाल करने वाले प्रोडक्शन सॉफ़्टवेयर:
- ChromeStatus की एंट्री
- शिप करने की इच्छा
- Chromium की गड़बड़ी
- WebKit Standards की जगह
- Mozilla स्टैंडर्ड पोज़िशन
स्वीकार की गई
Microsoft Edge की टीम ने Chromium में, Async Clipboard API के लिए SVG सहायता लागू की थी. इस पोस्ट की समीक्षा, रेचल एंड्रयू और अनुपम स्निग्धा ने की है.