बूँद को बेस 64 में बदलें

Question

इस कोड है कि मैं क्या करना चाहते हैं के लिए एक टुकड़ा है Blobकरने के लिए Base64स्ट्रिंग:

यह टिप्पणी की गई हिस्सा काम करता है और जब इसके द्वारा उत्पन्न URL को sg को img करने के लिए सेट किया जाता है तो यह चित्र प्रदर्शित करता है:

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);

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

अपडेट करें:

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

Answer 1

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

फार्म डॉक्स readAsDataURL बेस 64 को encodes

Comments

आउटपुट स्ट्रिंग बेस 64 की तरह नहीं लगता है?

— क्वार्क

@xybrek यदि आप read.result प्रिंट करते हैं, तो आपको स्ट्रिंग में ही बेस 64 दिखाई देगा।

— नवाफ अलसुलामी

कंसोल.लॉग (base64data.substr (base64data.indexOf (',') + 1));

— पालोटा

onloadendइससे पहले कि readAsDataURLकुछ अजीब होता है और इसे कोड की अगली पंक्ति तक पहुंचने से पहले लोड करना समाप्त हो जाए। जाहिर है कि ऐसा कभी नहीं होगा लेकिन यह अभी भी अच्छा अभ्यास है।

— 3ocene

यह उत्तर गलत है, यह स्ट्रिंग के मोर्चे पर कोई नहीं -6464 वर्ण जोड़ता है।

— जोशुआ स्मिथ

Answer 2

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

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

Comments

तर्क क्या है cb?

— फेलो स्ट्रेंजर

@ फेलोस्ट्रेंजर आमतौर पर कॉलबैक, जैसे कि blobToBase64 (myBlob, function (base64String) {/ * base64String * /} का उपयोग करें), क्योंकि यह async है

— लियोनार्ड पाउली

@ यददिक्सन, लगता है मुझे आपकी मदद चाहिए। इसे देखें: stackoverflow.com/questions/46192069/…

— सफलता मैन

Answer 3

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);
}

Comments

अच्छा, @Vemus क्योंकि FileReader बेस 64 के रूप में परिणाम विशेषता में उजागर होता है, पूरी तरह से काम करता है।

— कैमी रोड्रिगेज

Answer 4

एक शुद्ध JavaSript तरीका है जो किसी भी ढेर पर निर्भर नहीं है:

const blobToBase64 = blob => {
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  return new Promise(resolve => {
    reader.onloadend = () => {
      resolve(reader.result);
    };
  });
};

इस सहायक फ़ंक्शन का उपयोग करने के लिए आपको कॉलबैक सेट करना चाहिए, उदाहरण:

blobToBase64(blobData).then(res => {
  // do what you wanna do
  console.log(res); // res is base64 now
});

---

मैं रिएक्ट नेटिव प्रोजेक्ट पर अपनी समस्या के लिए यह सहायक कार्य लिखता हूं, मैं एक छवि डाउनलोड करना चाहता था और फिर इसे एक कैश्ड छवि के रूप में संग्रहीत करता हूं:

fetch(imageAddressAsStringValue)
  .then(res => res.blob())
  .then(blobToBase64)
  .then(finalResult => { 
    storeOnMyLocalDatabase(finalResult);
  });

Answer 5

function bufferToBinaryString(arrayBuffer){
    return String.fromCharCode(...new Uint8Array(arrayBuffer));
}
(async () => console.log(btoa(bufferToBinaryString(await new Response(blob).arrayBuffer()))))();

या

function bufferToBinaryString(arrayBuffer){
    return String.fromCharCode(...new Uint8Array(arrayBuffer));
}
new Response(blob).arrayBuffer().then(arr_buf => console.log(btoa(bufferToBinaryString(arr_buf)))))

रिस्पांस का निर्माण देखें , आप रिस्पॉन्स[blob, buffer source form data, readable stream, etc.] में बदल सकते हैं , जिसे बाद में चालू किया जा सकता है[json, text, array buffer, blob] एसिंक्स विधि / कॉलबैक के साथ ।

संपादित करें: जैसा कि @ राल्फ ने उल्लेख किया है, सब कुछ utf-8 स्ट्रिंग में बदलने से समस्याएँ पैदा होती हैं (दुर्भाग्य से रिस्पॉन्स एपीआई बाइनरी स्ट्रिंग में कनवर्ट करने का एक तरीका प्रदान नहीं करता है), इसलिए सरणी बफर को मध्यवर्ती के रूप में उपयोग किया जाता है, जिसके लिए दो और चरणों की आवश्यकता होती है (इसे परिवर्तित करना बाइट सरणी बाइनरी स्ट्रिंग के लिए), यदि आप मूल btoaविधि का उपयोग करने पर जोर देते हैं ।

Comments

.text () UTF8 का उपयोग करके डिकोड करता है, अगर प्रतिक्रिया में बाइनरी कोड हो तो क्या होगा? मेरा मानना ​​है कि यह गैर-पाठ डेटा के लिए विफल होगा

— राल्फ

मैं आपकी बात देखता हूं, जवाब में संशोधन किया (हालांकि यह काफी लंबा हो गया है)। इस बिंदु पर यह बेहतर होगा कि वे जोर न देंbtoa

— वैलेन

Answer 6

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

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

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

Answer 7

तो समस्या यह है कि आप एक बेस 64 इमेज अपलोड करना चाहते हैं और आपके पास एक ब्लॉन्ड यूआरएल है। अब इसका उत्तर सभी html 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);}
     });
 }

Answer 8

मुझे एक ऐसी चीज़ चाहिए थी, जिसकी सूची में स्टोर करने के लिए मेरे पास base64 मान हो और मेरे लिए इवेंट श्रोता काम कर रहा हो। आपको बस FileReader की जरूरत है जो छवि को पढ़ेगी और परिणाम में बेस 64 लौटाएगा।

createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    const supportedImages = []; // you can also refer to some global variable
    reader.addEventListener(
      'load',
      () => {
        // reader.result will have the required base64 image
        const base64data = reader.result;
        supportedImages.push(base64data); // this can be a reference to global variable and store the value into that global list so as to use it in the other part
      },
      false
    );
    // The readAsDataURL method is used to read the contents of the specified Blob or File.
    if (image) {
      reader.readAsDataURL(image);
    }
 }

अंतिम भाग readAsDataURL है जो बहुत महत्वपूर्ण है इसका उपयोग निर्दिष्ट बूँद की सामग्री को पढ़ने के लिए किया जा रहा है

Answer 9

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

var base64Image = new Buffer (बूँद, 'बाइनरी') .toString ('base64');

Comments

क्योंकि यह उत्तर नोड एपीआई का उपयोग करता है और इसलिए बूँद (ब्राउज़र एपीआई) के बारे में मूल प्रश्न का उत्तर नहीं देता है।

— RReverser

बफर क्या है?

— 15

मुझे अनट्रेड टाइप टाइप मिलता है: पहला तर्क एक स्ट्रिंग, बफ़र, ArrayBuffer, सरणी, या सरणी-जैसा ऑब्जेक्ट होना चाहिए।

— गलत

@TeodorKolev यह Node.js के लिए विशिष्ट है

— Jader Dias