दिलचस्प पोस्ट
मैं कैसे बता सकता हूं कि क्या एक विशेष सीएसएस गुण jQuery के साथ विरासत में मिला है? जेएनए माउस हुक का काम उदाहरण क्या Xcode में चेतावनियों को दबाने का कोई तरीका है? वेब-सापेक्ष पथ पर वापस सही पथ क्यों। नेट स्ट्रिंग अपरिवर्तनीय है? क्या दो कार्यों के तुल्यता को प्राप्त करना अनिवार्य है? Matplotlib हिस्टोग्राम या Seaborn distplots के डिब्बे पर कोई रूपरेखा CodeIgniter अस्वीकृत कुंजी वर्ण क्या अन्य ऑब्जेक्ट में जावा कॉल पेरेंट ओवरराइड विधि है लेकिन उपप्रकार नहीं? रेल सर्वर लॉन्च करने में त्रुटि: अपरिभाषित विधि 'कॉन्फ़िगर' स्थानीय मशीन पर PHP सर्वर? सी # में एक पैरामीटर के रूप में सिर्फ एक प्रकार से गुजारें Realm ब्राउज़र में मेरी Realm फ़ाइल को कैसे देखें? पैक किए गए एकल परिशुद्धता फ्लोट के रूप में मेमोरी से 8 वर्णों को एक __ मीटर 25 चर में लोड कर रहा है मैं एक संरचना को कैसे मार्शल कर सकता हूँ जिसमें सी # के लिए एक चर-आकार वाली सरणी है?

एचटीएमएल 5 कैनवास पर ड्राइंग के लिए एक छवि में बाइट्स परिवर्तित करना

कोई भी जानता है कि मैं कैसे बाइट्स कन्वर्ट कर सकता हूँ जो एक websocket (सी # ऐप से) एक छवि के माध्यम से भेजी जाती है? फिर मैं एक कैनवास पर छवि खींचना चाहता हूँ। मैं ऐसा करने के दो तरीके देख सकता हूँ:

  • किसी भी तरह से इसे परिवर्तित किए बिना कैनवास पर छवि बाइट रूप में खींचें।
  • बाइट्स को किसी बेस64 स्ट्रिंग में किसी भी तरह जावास्क्रिप्ट में कनवर्ट करें, फिर ड्रा करें।

यहां मेरा कार्य है जो ड्राइंग के लिए बाइट प्राप्त करता है:

function draw(imgData) { var img=new Image(); img.onload = function() { cxt.drawImage(img, 0, 0, canvas.width, canvas.height); }; // What I was using before... img.src = "data:image/jpeg;base64,"+imgData; } 

मुझे पहले से बेस64 स्ट्रिंग के रूप में परिवर्तित किया गया छवि प्राप्त हो रही थी, लेकिन यह सीखने के बाद कि बाइट्स भेजने के आकार का आकार छोटा है (30% छोटा?) मैं यह काम करना चाहूंगा मुझे यह भी उल्लेख करना चाहिए कि छवि एक जेपीईजी है

किसी को भी पता है कि मैं यह कैसे करूँगा? सहायता के लिए धन्यवाद। 🙂

Solutions Collecting From Web of "एचटीएमएल 5 कैनवास पर ड्राइंग के लिए एक छवि में बाइट्स परिवर्तित करना"

मैंने इसे अंत में प्रयोग किया था:

 function draw(imgData, frameCount) { var r = new FileReader(); r.readAsBinaryString(imgData); r.onload = function(){ var img=new Image(); img.onload = function() { cxt.drawImage(img, 0, 0, canvas.width, canvas.height); } img.src = "data:image/jpeg;base64,"+window.btoa(r.result); }; } 

मुझे btoa () का उपयोग करने से पहले बाइट्स को एक स्ट्रिंग में पढ़ने की आवश्यकता है।

अगर आपकी छवि सचमुच एक जेपीईजी है, तो आप प्राप्त डेटा को बेस 64 स्ट्रीम में परिवर्तित कर सकते हैं। फ़ायरफ़ॉक्स और वेबकिट ब्राउज़र्स (जैसा मुझे याद है) के पास एक निश्चित फ़ंक्शन है, btoa() । यह इनपुट स्ट्रिंग को आधार64 एन्कोडेड स्ट्रिंग में कनवर्ट करता है। इसका समकक्ष atob() है जो विपरीत है।

आप इसे निम्न तरह इस्तेमाल कर सकते हैं:

 function draw(imgData){ var b64imgData = btoa(imgData); //Binary to ASCII, where it probably stands for var img = new Image(); img.src = "data:image/jpeg;base64," + b64imgData; document.body.appendChild(img); //or append it to something else, just an example } 

यदि आपका लक्ष्य ब्राउज़र (IE, उदाहरण के लिए) फ़ायरफ़ॉक्स या वेबकिट नहीं है, तो आप एक इंटरनेट के चारों ओर झूठ बोलने वाले कई एक फ़ंक्शन का उपयोग कर सकते हैं ( अच्छा , यह कई ब्राउज़रों में प्रदर्शन के आंकड़े भी प्रदान करता है, यदि आप ' फिर से दिलचस्पी है 🙂