HTML5 डेस्कटॉप के बिना स्क्रीनशॉट

लगभग हर दिन मैं जीमेल का उपयोग करता हूं, लेकिन हाल ही में मैंने देखा कि यदि आप स्क्रीन का स्क्रीनशॉट ( www.take-a-screenshot.org ) लेते हैं , तो बस Ctrl + V दबाकर, इस स्क्रीनशॉट को सीधे जीमेल संदेश के पाठ में कॉपी किया जा सकता है। यह हर जगह काम करता है, लेकिन स्वाभाविक रूप से IE को छोड़कर। यह कैसे होता है के सवाल में रूचि अगली पोस्ट Stackoverflow पर। HTML5 की शक्ति से प्रभावित होकर, क्लिपबोर्डडैटा ने एक सरल पोर्टल बनाने का निर्णय लिया, जहां कोई भी उपयोगकर्ता किसी भी डेस्कटॉप एप्लिकेशन को कॉपी किए बिना स्क्रीनशॉट डाउनलोड कर सकता है।

ब्राउज़र का समर्थन

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

जावास्क्रिप्ट में स्क्रीनशॉट अपलोड करें

बफर (स्क्रीनशॉट) से एक छवि लोड करने के लिए, आपको सबसे पहले एक पेस्ट ईवेंट हैंडलर को परिभाषित करना होगा:

document.body.addEventListener("paste", function(e) { ... }); 

हैंडलर हमेशा कहा जाएगा जब ब्राउज़र विंडो के कार्य क्षेत्र में "इंसर्ट" घटना होती है, उदाहरण के लिए, Ctrl + V. अगला दबाकर, आपको उस कोड को निर्धारित करने की आवश्यकता है जो वास्तव में बफर से छवि फ़ाइल प्राप्त करता है। यह कोड क्रोम और ओपेरा ब्राउज़रों के लिए समान है, लेकिन फायरफॉक्स के लिए अलग है, क्योंकि बाद में सुरक्षा कारणों से क्लिपबोर्डडॉट ऑब्जेक्ट तरीके बंद कर दिए गए हैं।

क्रोम, ओपेरा

 // e.clipboardData.items -         for (var i = 0; i < e.clipboardData.items.length; i++) { //    if (e.clipboardData.items[i].kind == "file" && e.clipboardData.items[i].type == "image/png") { //    Blob ( ) var imageFile = e.clipboardData.items[i].getAsFile(); var fileReader = new FileReader(); fileReader.onloadend = function(e) { //    this.result  Base64  loadImg(this.result); }; //  Blob  DataURL (Base64   ) fileReader.readAsDataURL(imageFile); e.preventDefault(); break; } } 

फ़ायर्फ़ॉक्स

FireFox में, हमारे पास क्लिपबोर्डडाटा के माध्यम से फाइल को पढ़ने की क्षमता नहीं है। जब चिपकाया जाता है, तो ब्राउज़र DataURL के रूप में src के साथ एक <img> टैग बनाता है। इसलिए, आपको "बैसाखी" बनाना होगा:

 //   js,   Mozilla,   ,  (contenteditable) div  //    . if ($.browser.mozilla) { $(document.body).prepend('<div id="temp" contenteditable="true" style="height:1px;width:1px;color:#FFFFFF;"></div>'); $('#temp').focus(); } //   "" document.body.addEventListener("paste", function(e) { if ($.browser.mozilla) { //  Mozilla,      div // (   ,  FireFox  img   ) $('#temp').focus(); //   img (   2, 3, ..., N ) $('#temp img').remove(); //  FireFox   img  callback-     img -    setTimeout(function() { //   FireFox   img  temp div,     DataURL    loadImg($('#temp img').attr('src')); }, 1); return true; } }); 

तस्वीर कहाँ अपलोड करें?

आप सर्वर पर सीधे चित्र अपलोड कर सकते हैं, इसे POST DataURL के माध्यम से स्थानांतरित कर सकते हैं या उदाहरण के लिए कैनवास पर अपनी स्क्रीन पर किया जा सकता है:

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ... function loadImg(dataURL) { var imageObj = new Image(); imageObj.onload = function() { var width = this.width, height = this.height; canvas.width = width; canvas.height = height; ctx.drawImage(this, 0, 0, width, height); }; imageObj.src = dataURL; } 

कैनवास सुविधाजनक है क्योंकि सर्वर पर स्क्रीनशॉट अपलोड करने से पहले आप इसे संपादित कर सकते हैं: रेखांकन, ड्रा, सर्कल, कट, आदि।

सर्वर पर क्या हो रहा है?

सर्वर के पास एक POST नियंत्रक होना चाहिए जो बेस 64 (DataURL) प्रारूप में निकाय को स्वीकार करता है और इसे द्विआधारी छवि फ़ाइल में डिकोड करता है, उदाहरण के लिए png। नियंत्रक को किसी भी भाषा में लिखा जा सकता है, उदाहरण के लिए जावा स्प्रिंगएमवीसी का उपयोग करके:

 @RequestMapping(value = "/upload", method = RequestMethod.POST) public @ResponseBody String save(@RequestBody String b64) { File file = null; FileOutputStream out = null; try { //  Output  out = new FileOutputStream("/opt/files/somename.png"); //  Base64       out.write(Base64.decodeBase64(StringUtils.replace(b64, "data:image/png;base64,", ""))); //   IOUtils.closeQuietly(out); } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return file.getName(); } 

चौकस के लिए, मैं ध्यान देता हूं कि यह StringUtils.replace (b64, "data: image / png; base64,", "") जावास्क्रिप्ट से प्रेषित DataURL को सामान्य करने के लिए निर्माण की आवश्यकता है। तथ्य यह है कि DataURL बनाते समय, इसके प्रकार और प्रारूप को पहले सेट किया जाता है और फिर बेस 64 प्रतिनिधित्व आता है, उदाहरण के लिए डेटा: छवि / png, base64, iVBORw0KGgoAAAANSUhEUgAnVYAAAMAC ...

इसके अतिरिक्त, आप फ़ाइल का आकार भी देख सकते हैं, और यदि यह एक निश्चित अधिकतम से अधिक है, तो इसे jpg में संपीड़ित करें।

मामलों का उपयोग करें

हम अपने ग्राहकों के स्क्रीनशॉट लेने के लिए त्वरित और आसान तरीके के रूप में हर दिन आपकी स्क्रीन सेवा का उपयोग करते हैं। दुर्भाग्य से, नेटवर्क पर बहुत कम ऐसे समाधान हैं और जो असुविधाजनक हैं या केवल डेस्कटॉप के माध्यम से काम करते हैं:

• prntscr.com - आप केवल क्रोम में और संपादन के बिना स्क्रीनशॉट कॉपी कर सकते हैं
• snag.gy पहले से बेहतर है, लेकिन स्क्रीनशॉट बहुत धीमे और केवल एक बार (पहले) लोड होते हैं
• मुझे यह अब नहीं मिला ...

निकट भविष्य में हम अपने ऑनलाइन सलाहकार Cackle को यह सभी कार्यक्षमता स्थानांतरित करने की योजना बना रहे हैं। इस प्रकार, ग्राहकों के पास एक स्क्रीनशॉट लेने और ऑपरेटर के सलाहकार के माध्यम से सीधे छवि को स्थानांतरित करने का अवसर होगा। यह एक अर्थ में, सह-ब्राउज़र के लिए सबसे अच्छा प्रतिस्थापन है, क्योंकि यह आपको संपूर्ण स्क्रीन (और न केवल ब्राउज़र) को प्रदर्शित करने, विकास लागत को कम करने और त्रुटियों को कम करने की अनुमति देता है।

अंत में, मैं कहूंगा कि आपकी स्क्रीन परियोजना पूरी तरह से नई है और विकसित होती रहेगी, इसलिए मैं कार्यक्षमता के संबंध में आपकी आलोचना और सुझावों की प्रतीक्षा कर रहा हूं।