HTML5 कैनवास से बाइनरी (बेस 64) डेटा प्राप्त करना (readAsBinaryString)

Question 1

क्या किसी HTML कैनवस की सामग्री को बाइनरी डेटा के रूप में पढ़ने का कोई तरीका है?

फिलहाल मुझे एक इनपुट फ़ाइल और उसके नीचे कैनवास दिखाने के लिए निम्न HTML मिला है:

<p><button id="myButton" type="button">Get Image Content</button></p>
<p>Input:<input id="fileInput" type="file"/></p>
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p>

फिर मैंने कैनवास को सही ढंग से सेट करने के लिए अपनी इनपुट फ़ाइल सेटअप की है जो ठीक काम करती है:

$('#fileInput').on('change', function() {
    $.each(this.files, function() {
        var image = new Image();
            image.src = window.URL.createObjectURL(this);

        image.onload = function() {
            $("canvas").drawImage({
                source: image,
                x: 50, y: 50,
                width: 100,
                fromCenter: false
            });
        };
    });
});

जब बटन क्लिक किया जाता है तो मुझे अब बाइनरी डेटा (बेस 64 एनकोडेड) कैनवस से प्राप्त करना होगा ताकि यह डेटा को सर्वर पर धकेल दे ...

अंतिम परिणाम यह है कि मुझे एक फ़ाइल का चयन करने, उसे आकार देने / उसे आकार देने की क्षमता के साथ उपयोगकर्ता को प्रदान करने की आवश्यकता है, और फिर एक बटन पर क्लिक करें जिस बिंदु पर संपादित छवि सर्वर पर अपलोड की जाएगी (मैं सर्वर-साइड नहीं कर सकता सर्वर-साइड सीमाओं के कारण क्रॉपिंग / आकार परिवर्तन ...)

कोई भी मदद बहुत अच्छी रहेगी! चियर्स

Question 2

canvasतत्व एक प्रदान करता है toDataURLविधि है जो एक रिटर्न data:यूआरएल है कि किसी भी प्रारूप में base64 एनकोडेड छवि डेटा शामिल हैं। उदाहरण के लिए:

var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default

हालांकि रिटर्न वैल्यू सिर्फ आधार 64 एनकोडेड बाइनरी डेटा नहीं है, यह स्कीम को ट्रिम करने के लिए एक सरल मामला है और फ़ाइल प्रकार को केवल इच्छित डेटा प्राप्त करना है।

toDataURLब्राउज़र सोचता है कि अगर तुम तैयार किया है किसी भी डेटा को एक अलग मूल से लोड किया गया था कैनवास के लिए विधि असफल हो जायेगी, तो इस दृष्टिकोण अपनी छवि फ़ाइलों HTML पृष्ठ जिसका स्क्रिप्ट इस प्रदर्शन कर रहा है के रूप में एक ही सर्वर से लोड किए गए हैं, तो केवल काम करेंगे ऑपरेशन।

अधिक जानकारी के लिए canvasएपीआई पर एमडीएन डॉक्स देखें , जिसमें यूआरआई योजना पर विवरण toDataURLऔर विकिपीडिया लेखdata: शामिल हैं, जिसमें इस कॉल से आपको प्राप्त होने वाले यूआरआई के प्रारूप पर विवरण शामिल है।

Question 3

संक्षिप्त जवाब:

const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];

Question 4

यह देखकर कि आप अपने कैनवास को किस तरह से खींचते हैं

$("canvas").drawImage();

ऐसा लगता है कि आप jQuery कैनवास ( jCanvas) का उपयोग करते हैं कालेब इवांस द्वारा ) का । मैं वास्तव में उस प्लगइन का उपयोग करता हूं और इसमें कैनवास बेस 64 इमेज स्ट्रिंग को पुनः प्राप्त करने का एक सरल तरीका है$('canvas').getCanvasImage();

यहाँ आप के लिए एक काम कर रहे बेला है: http://jsfiddle.net/e6nqzxpn/