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

डेमो
Glitch पर डेमो में, एसवीजी कॉपी करने और चिपकाने का तरीका जानें. यह देखने के लिए कि यह सुविधा कैसे काम करती है, सोर्स कोड देखें. कॉपी करने और चिपकाने से पहले और बाद में, किसी भी सर्कल पर क्लिक करना न भूलें. चिपकाने के बाद, संभावित रूप से खतरनाक onclick
इवेंट मैनेजर एट्रिब्यूट हटा दिए जाते हैं.
इसी विषय से जुड़े कुछ लिंक
- इस सुविधा का इस्तेमाल करने वाला प्रोडक्शन सॉफ़्टवेयर:
- ChromeStatus एंट्री
- शिप करने का इंटेंट
- Chromium में गड़बड़ी
- WebKit स्टैंडर्ड की स्थिति
- Mozilla के स्टैंडर्ड की स्थिति
आभार
Microsoft Edge की टीम ने, Chromium में एसिंक्रोनस क्लिपबोर्ड एपीआई के लिए एसवीजी की सुविधा लागू की थी. इस पोस्ट की समीक्षा, रीचेल एंड्रयू और अनुपम स्निग्धा ने की है.