Yandex.Mail डेवलपर्स से इनपुट क्षेत्र में चित्रों के सम्मिलन का समर्थन करने के तीन तरीके

इतना समय पहले नहीं, हमने Yandex.Mail में नए अटैचमेंट के बारे में विस्तार से बात की। दिसंबर में, हमारे पास एक नया छवि दर्शक है । इन नवाचारों के लिए धन्यवाद, मेल में छवियों के साथ काम करना वास्तव में सरल और अधिक सुविधाजनक हो गया है।

हालांकि, एक और कठिनाई थी: ब्राउज़र सीमाओं के कारण, संदेश सीधे संदेश के शरीर में नहीं डाले जा सकते थे। चित्र को आपके कंप्यूटर पर और वहाँ से किसी अन्य फ़ाइल की तरह पत्र में संलग्न करना था।

हमने इस समस्या के बारे में लंबे समय तक सोचा। एक जावा एपलेट या फ्लैश का उपयोग करना संभव था, लेकिन इन समाधानों में महत्वपूर्ण सीमाएं थीं। उदाहरण के लिए, जावा एप्लेट का उपयोग करते समय, आपको ब्राउज़र में एप्लेट को चलाने की अनुमति देनी होगी। अंत में, हमने आधुनिक ब्राउज़रों की नई सुविधाओं का उपयोग करने का निर्णय लिया, जैसे क्लिपबोर्ड एपीआई, फ़ाइल एपीआई और ड्रैग एन ड्रॉप।

क्लिपबोर्ड से या संदेश में सार्वजनिक URL से चित्रों को कैसे पेस्ट किया जाए और उन्हें डेस्कटॉप से ​​बस खींचकर संदेश निकाय में कैसे जोड़ा जाए, इस बारे में हमारी पोस्ट में पढ़ें।

क्लिपबोर्ड से तस्वीरें चिपकाना

हाल तक तक, वेब अनुप्रयोगों में क्लिपबोर्ड के साथ पूरी तरह से काम करना असंभव लग रहा था। लेकिन फिर एक नया एपीआई दिखाई दिया जो विशेष रूप से उस ( क्लिपबोर्ड एपीआई ) के लिए बनाया गया था। यह क्लिपबोर्ड से डेटा के साथ काम करने के लिए एक इंटरफ़ेस है जब कॉपी, कटिंग और पेस्ट करना होता है। इंटरफ़ेस काफी सार्वभौमिक है और न केवल पाठ डेटा के साथ, बल्कि विभिन्न स्वरूपों में फ़ाइलों के साथ भी काम करता है। लेकिन, जैसा कि आमतौर पर होता है, यह सभी ब्राउज़रों और विभिन्न संस्करणों द्वारा समर्थित नहीं है।

अब तक का सबसे पूर्ण समर्थन केवल WebKit-Browser (Safari, Chrome, Yandex.Browser) में लागू किया गया है। इन ब्राउज़रों में, कॉपी, कट और पेस्ट इवेंट्स के लिए, इवेंट ऑब्जेक्ट को क्लिपबोर्डडैट ऑब्जेक्ट तक पहुंच मिलती है। क्लिपबोर्डडैट में गुण आइटम (क्लिपबोर्ड पर तत्व) और प्रकार (क्लिपबोर्ड पर जानकारी के प्रकार) हैं। आप GetData और setData विधियों का उपयोग करके बफर से जानकारी प्राप्त या बदल सकते हैं।

Chrome में (संस्करण 18 के बाद से) और Yandex.Browser चिपकाने के दौरान क्लिपबोर्ड पर चित्रों तक पहुंच होती है। यह इस प्रकार किया जाता है:

//   contentEditable var el = document.getElementById('editor'); el.addEventListener('paste', function(e) { var clipboard = e.clipboardData; if (clipboard && clipboard.items) { //         var item = clipboard.items[0]; if (item && item.type.indexOf('image/') > -1) { //      var blob = item.getAsFile(); if (blob) { //       data:uri var reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = function(event) { var img = new Image(); img.src = event.target.result; el.appendChild(img); } } } } }); 

WebKit इंजन का उपयोग करने वाले ब्राउज़रों के अलावा, क्लिपबोर्ड से चित्रों को चिपकाने से फ़ायरफ़ॉक्स में भी काम होता है: वहाँ, designMode में चित्र तुरंत डेटा में पेस्ट किए जाते हैं: uri।

सार्वजनिक URL द्वारा चित्र सम्मिलित करें

सबसे सरल और सबसे सामान्य क्रियाओं में से एक - इंटरनेट पर एक पृष्ठ से एक तस्वीर की नकल करना और इसे एक पत्र में चिपकाना - डिफ़ॉल्ट ब्राउज़र द्वारा समर्थित नहीं है। सफारी 5+ में, क्लिपबोर्डडॉट ऑब्जेक्ट में कोई आइटम गुण नहीं है, लेकिन एक प्रकार की सरणी है जिसमें प्रतिलिपि की गई जानकारी के प्रकार हैं। और अगर कॉपी की गई तस्वीर पहले से ही सार्वजनिक url द्वारा इंटरनेट पर है, तो इसे सम्मिलित करना भी संभव होगा। सामान्य रूप से DesignMode में चित्र सम्मिलित करते समय, Safari src विशेषता (webkit-fake-url: // 416873AC ...) के लिए नकली मान के साथ एक img तत्व बनाता है। इस संसाधन को जेएस से किसी भी तरह से एक्सेस नहीं किया जा सकता है, इसलिए नकली तस्वीर को डालने से रोकने के लिए, आपको इवेंट ऑब्जेक्ट पर StopDefault करने की आवश्यकता है।

  //   contentEditable var el = document.getElementById('editor'); el.addEventListener('paste', function(e) { var clipboard = e.clipboardData; if (clipboard && clipboard.types) { var types = clipboard.types; if (types.indexOf('public.url') > -1) { //    ,        (webkit-fake-url://416873AC...) e.preventDefault(); //   var img = new Image(); img.src = clipboard.getData('public.url'); el.appendChild(img); } } }); 

डिफ़ॉल्ट रूप से, सार्वजनिक url सम्मिलन IE9 और उच्चतर में काम करता है।

सम्मिलित खींचें

क्लिपबोर्ड या सार्वजनिक यूआरएल से सीधे चित्रों की प्रतिलिपि बनाने के अलावा, कुछ ब्राउज़रों में खींचें और ड्रॉप के साथ चित्र सम्मिलित करना संभव है। यह बहुत सुविधाजनक है, क्योंकि आप एक बार में कई चित्रों को पत्र में जोड़ सकते हैं।

  //   contentEditable var el = document.getElementById('editor'); el.addEventListener('drop', function(e) { var dataTransfer = e.dataTransfer; if (dataTransfer && dataTransfer.files) { var files = dataTransfer.files; var len = files.length; if (len) { for (var i = 0; i < len; i++) { var file = files[i]; //    if (file.type.indexOf('image/') < 0) continue; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(event) { var img = new Image(); img.src = event.target.result; el.appendChild(img); }; } e.preventDefault(); } } }); 

यह फ़ायरफ़ॉक्स, सफारी 5.1+, क्रोम और यैंडेक्स.ब्रोज़र में काम करता है।

Yandex.Mail डिज़ाइन के साथ पत्र लिखने के लिए टाइनीसीईवाई WYSIWYG संपादक का उपयोग करता है। हमने इस लेख के सभी समाधानों को मिलाकर, इसके लिए एक प्लगइन लिखा था। यह github.com/Panya/tinymce_pasteimage पर उपलब्ध है।