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