Pytanie Konwertuj obiekt blob na base64


To jest fragment kodu, który chcę zrobić Blob do Base64 strunowy:

Ta skomentowana część działa, a gdy adres URL wygenerowany przez to jest ustawiony na img src, wyświetla obraz:

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

Problem dotyczy kodu niższego, generowana zmienna źródłowa ma wartość NULL

Aktualizacja: 

Czy jest łatwiejszy sposób to zrobić z JQuery, aby móc utworzyć ciąg Base64 z pliku Blob, jak w powyższym kodzie?


76
2017-09-06 04:55


pochodzenie




Odpowiedzi:


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

Formularz docs  readAsDataURL koduje do base64


147
2017-09-06 05:05



Wyjściowy ciąg nie wygląda na base64? - xybrek
@ xybrek Jeśli wydrukujesz read.result, zobaczysz base64 w samym ciągu. - Nawaf Alsulami
Czy to działa w Safari iOS 6? - SuperMarco
console.log (base64data.substr (base64data.indexOf (',') + 1)); - palota
Ta odpowiedź jest niepoprawna, dołącza znaki none-base64 na początku łańcucha. - Joshua Smith


to działało dla mnie:

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



Jaki jest argument cb? - Fellow Stranger
@FellowStranger powszechnie oddzwanianie, używane jak blobToBase64 (myBlob, function (base64String) {/ * używają base64String * /}), ponieważ jest asynchroniczne - Leonard Pauli
@yeahdixon, Wydaje mi się, że potrzebuję twojej pomocy. Spójrz na to : stackoverflow.com/questions/46192069/... - Success Man


Problem polega na tym, że chcesz przesłać obraz bazowy 64 i masz adres URL typu blob. Teraz odpowiedź, która będzie działać na wszystkich przeglądarkach HTML 5 to: Zrobić:

  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





możesz rozwiązać problem przez:

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

Mam nadzieję, że ci to pomoże


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



Czy możesz wyjaśnić, w jaki sposób rozwiązuje to problem? - Vemonus
Miło, @Vemonus, ponieważ FileReader ujawnia się jako atrybut base64, działa perfekcyjnie. - Cami Rodriguez


Najłatwiejszy sposób w jednym wierszu kodu 

var base64Image = new Buffer (blob, 'binary') .toString ('base64');


0
2018-04-04 13:06



Jest to jedna niedoceniana odpowiedź. Miałem z tym dużo problemów. Dziękuję Ci. Mój błąd polegał na tym, że nie przekazałem opcji kodowania 'binary' podczas tworzenia mojego bufora. - Slbox
Ponieważ ta odpowiedź używa interfejsów API węzła i dlatego nie odpowiada na oryginalne pytanie dotyczące Blob (interfejs API przeglądarki). - RReverser
Co to jest bufor? - TeodorKolev