दिलचस्प पोस्ट
मैं Xcode में मैक एप्लिकेशन के लिए आइकन कैसे सेट कर सकता हूं? मेरी पहली MySQL परियोजना के लिए एक योजना बनाने के लिए छेद के साथ बहुभुज त्रिभुज रेफरर की जांच करना ioctl बनाम नेटलिंक बनाम मेमॅप कर्नेल स्थान और उपयोगकर्ता स्थान के बीच संवाद करने के लिए JQuery के साथ 'एन्टर' पर एक फॉर्म जमा करना? सी / सी ++ में पूर्णांक ओवरफ्लो पर हस्ताक्षर किए जाने की इजाजत Intellij IDEA जावा वर्ग को बचाने पर स्वत: संकलन नहीं PHP से कैसे आप .bat फ़ाइल चला सकते हैं? 'जावा-वर्जन' स्टडरर क्यों जाते हैं? यूट्यूब iframe पर ओवरले अपारदर्शी डिवीजन पायथन: (समान) तारों के एक सेट से उपसर्ग निर्धारित करें कम से कम अभिप्रेरित आवेदन प्रतिक्रिया देरी क्या है? पायथन में परिभाषा समय पर डिफ़ॉल्ट तर्क का मूल्यांकन क्यों किया जाता है? आपके लिनक्स मशीन पर लिबस्टडीसी ++ लाइब्रेरी का कौन सा संस्करण स्थापित है आप कैसे पता लगा सकते हैं?

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