सवाल ब्लॉब को बेस 64 में कनवर्ट करें


यह कोड के लिए एक स्निपेट है जिसे मैं करना चाहता हूं Blob सेवा मेरे Base64 स्ट्रिंग:

इसने भाग कार्यों पर टिप्पणी की और कहा कि जब इसके द्वारा उत्पन्न यूआरएल img src पर सेट होता है तो यह छवि प्रदर्शित करता है:

var blob = items[i].getAsFile();
//var URLObj = window.URL || window.webkitURL;
//var source = URLObj.createObjectURL(blob);
//console.log("image source=" + source);

var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)
}; // data url!
var source = reader.readAsBinaryString(blob);

समस्या निचले कोड के साथ है, उत्पन्न स्रोत चर शून्य है

अद्यतन करें: 

क्या ऊपर दिए गए कोड में ब्लॉब फ़ाइल से बेस 64 स्ट्रिंग बनाने में सक्षम होने के लिए JQuery के साथ ऐसा करने का कोई आसान तरीका है?


76
2017-09-06 04:55


मूल




जवाब:


 var reader = new FileReader();
 reader.readAsDataURL(blob); 
 reader.onloadend = function() {
     base64data = reader.result;                
     console.log(base64data);
 }

इससे डॉक्स  readAsDataURL बेस 64 के लिए एन्कोड


147
2017-09-06 05:05



आउटपुट स्ट्रिंग बेस 64 की तरह दिखता प्रतीत नहीं होता है? - xybrek
@xybrek अगर आप read.result प्रिंट करते हैं, तो आप स्ट्रिंग में बेस 64 देखेंगे। - Nawaf Alsulami
क्या यह सफारी आईओएस 6 पर काम कर रहा है? - SuperMarco
console.log (base64data.substr (base64data.indexOf (',') + 1)); - palota
यह उत्तर गलत है, यह स्ट्रिंग के सामने किसी भी बेस-बेस वर्ण को जोड़ता है। - Joshua Smith


यह मेरे लिए काम किया:

var blobToBase64 = function(blob, cb) {
    var reader = new FileReader();
    reader.onload = function() {
    var dataUrl = reader.result;
    var base64 = dataUrl.split(',')[1];
    cb(base64);
    };
    reader.readAsDataURL(blob);
};

10
2017-10-27 16:19



तर्क क्या है cb? - Fellow Stranger
@FellowStranger आमतौर पर कॉलबैक, blobToBase64 (myBlob, function (base64String) {/ * base64String * /} का उपयोग करें), क्योंकि यह async है - Leonard Pauli
@yeahdixon, लगता है कि मुझे आपकी मदद चाहिए। इसे देखो : stackoverflow.com/questions/46192069/... - Success Man


तो समस्या यह है कि आप बेस 64 छवि अपलोड करना चाहते हैं और आपके पास ब्लॉब यूआरएल है। अब उत्तर जो सभी एचटीएमएल 5 ब्राउज़रों पर काम करेगा: कर:

  var fileInput = document.getElementById('myFileInputTag');
  var preview = document.getElementById('myImgTag');

  fileInput.addEventListener('change', function (e) {
      var url = URL.createObjectURL(e.target.files[0]);
      preview.setAttribute('src', url);
  });
function Upload()
{
     // preview can be image object or image element
     var myCanvas = document.getElementById('MyCanvas');
     var ctx = myCanvas.getContext('2d');
     ctx.drawImage(preview, 0,0);
     var base64Str = myCanvas.toDataURL();
     $.ajax({
         url: '/PathToServer',
         method: 'POST',
         data: {
             imageString: base64Str
         },
     success: function(data) { if(data && data.Success) {}},
     error: function(a,b,c){alert(c);}
     });
 }

3
2018-02-04 08:50





आप समस्या को ठीक कर सकते हैं:

var canvas = $('#canvas'); 
var b64Text = canvas.toDataURL();
b64Text = b64Text.replace('data:image/png;base64,','');
var base64Data = b64Text;

उम्मीद है इससे आपको मदद होगी


2
2017-12-15 12:36





var audioURL = window.URL.createObjectURL(blob);
        audio.src = audioURL;

var reader = new window.FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function () {
            base64data = reader.result;
            console.log(base64data);
        }

2
2018-02-02 15:16



क्या आप समझा सकते हैं कि यह इस मुद्दे को कैसे हल करता है? - Vemonus
अच्छा, @Vemonus क्योंकि FileReader बेस 64 के रूप में परिणाम विशेषता में प्रकट होता है, पूरी तरह से काम करता है। - Cami Rodriguez


कोड की एक पंक्ति में सबसे आसान तरीका 

var base64Image = नया बफर (ब्लोब, 'बाइनरी') .toString ('base64');


0
2018-04-04 13:06



यह एक अनुचित उत्तर है। मुझे इसके साथ बहुत परेशानी हो रही थी। धन्यवाद। मेरी गलती एन्कोडिंग विकल्प पास नहीं कर रही थी 'binary' मेरे बफर बनाते समय। - Slbox
चूंकि यह उत्तर नोड एपीआई का उपयोग करता है और इसलिए ब्लॉब (ब्राउज़र एपीआई) के मूल प्रश्न का उत्तर नहीं देता है। - RReverser
बफर क्या है? - TeodorKolev