Erhalte Bild base64 mit reader.readAsArrayBuffer (Datei)

Question

Ich versuche, den Inhalt eines Bildes in einer Base64-Zeichenfolge zu erhalten.

Ursprünglich tat ich es mit readAsDataURL aber because I want to validate the mimetype on the client side, es scheint, ich muss lesenAsArrayBuffer wie auch hingewiesen .

So prevoiusly hatte ich das gut funktioniert:

var reader = new FileReader(); 
reader.onloadend = function(event) { 
    var base64 = reader.result; 
}; 

reader.readAsDataURL(event.target.files[0]); 

Reproduction online

Jetzt habe ich den MIME-Typ Validierung und ich habe folgendes:

var reader = new FileReader(); 

reader.onloadend = function(event) { 

    var realMimeType = getRealMimeType(reader); 

    if (realMimeType !== 'unknown') { 
     var emptyBufferArray = reader.result; //nothing 
    }else{ 
     alert("Invalid mime type!"); 
    } 
}; 

reader.readAsArrayBuffer(event.target.files[0]); //<-- notice the difference 

Reproduction online (nicht die base64 String bekommen)

Answer 1

Der einzige Weg, ich fand es zu tun war, zwei verschiedenezu verwendenInstanzen, eine innerhalb der anderen.

Reproduction online

Javascript

$(document).on('change', '#upload', addBackgroundImage); 

function addBackgroundImage(event) { 
    var reader = new FileReader(); 
    var readerBase64 = new FileReader(); 
    var image = event.target.files[0]; 

    reader.onloadend = function() { 
     var realMimeType = getRealMimeType(reader); 
     if (realMimeType !== 'unknown') { 
      readerBase64.readAsDataURL(image); 
     } else { 
      alert("Please upload a valid image file"); 
     } 
    }; 

    reader.readAsArrayBuffer(image); 

    readerBase64.onloadend = function(){ 
     var base64 = this.result; 
     $('.bg').css('background-image', 'url('+base64+')'); 
    }; 

    $('#upload').val(''); 
} 

function getRealMimeType(reader){ 
    var arr = (new Uint8Array(reader.result)).subarray(0, 4); 
    var header = ''; 
    var realMimeType; 

    for (var i = 0; i < arr.length; i++) { 
     header += arr[i].toString(16); 
    } 

    // magic numbers: http://www.garykessler.net/library/file_sigs.html 
    switch (header) { 
     case "89504e47": 
      realMimeType = "image/png"; 
      break; 
     case "47494638": 
      realMimeType = "image/gif"; 
      break; 
     case "ffd8ffDB": 
     case "ffd8ffe0": 
     case "ffd8ffe1": 
     case "ffd8ffe2": 
     case "ffd8ffe3": 
     case "ffd8ffe8": 
      realMimeType = "image/jpeg"; 
      break; 
     default: 
      realMimeType = "unknown"; // Or you can use the blob.type as fallback 
      break; 
    } 

    return realMimeType; 
} 

HTML

<input type="file" id="upload" /> 
<div class="bg"></div> 

Answer 2

Ich habe es noch nicht geschafft zu verwenden base64, aber ich habe einen Weg gefunden, es mit blob zu tun. Wenn Sie einen Weg finden, es mit base64 zu tun, fügen Sie bitte Ihre Antwort hinzu.

Im Moment sieht mein Bild Zeichenfolge wie diese, die ich erzeugen glauben Sie mir einige Probleme:

background-image: url("blob:https%3A//fiddle.jshell.net/214b3c01-5b38-4aae-b839-e35cf57a5190"); 

---

bekam ich den Hinweis von einer Geige über how to render a retrieved image as a blob URL

Dann einfach angewendet ich es zu meinem Code mit a little improvement und voila !!

Reproduction online in IE Arbeitsgruppe> 9, Chrome, Firefox ...

Whole Code:

HTML

<input type="file" id="upload" /> 
<div class="bg"></div> 

Javascript

$(document).on('change', '#upload', addBackgroundImage); 

function addBackgroundImage(event) { 
    var reader = new FileReader(); 

    reader.onloadend = function(event) { 
     var realMimeType = getRealMimeType(reader); 

     if (realMimeType !== 'unknown') { 
      var base64 = reader.result; 

      var arrayBufferView = new Uint8Array(this.result); 
      var blob = new Blob([ arrayBufferView ], { type: realMimeType }); 
      var urlCreator = window.URL || window.webkitURL || {}.createObjectURL; 
      var imageUrl = urlCreator.createObjectURL(blob); 

      $('.bg').css('background-image', 'url('+imageUrl+')'); 
     } else { 
      alert("Please upload a valid image file"); 
     } 
    } 
    reader.readAsArrayBuffer(event.target.files[0]); 
    $('#upload').val(''); 
} 

function getRealMimeType(reader){ 
    var arr = (new Uint8Array(reader.result)).subarray(0, 4); 
    var header = ''; 
    var realMimeType; 

    for (var i = 0; i < arr.length; i++) { 
     header += arr[i].toString(16); 
    } 

    // magic numbers: http://www.garykessler.net/library/file_sigs.html 
    switch (header) { 
     case "89504e47": 
      realMimeType = "image/png"; 
      break; 
     case "47494638": 
      realMimeType = "image/gif"; 
      break; 
     case "ffd8ffDB": 
     case "ffd8ffe0": 
     case "ffd8ffe1": 
     case "ffd8ffe2": 
     case "ffd8ffe3": 
     case "ffd8ffe8": 
      realMimeType = "image/jpeg"; 
      break; 
     default: 
      realMimeType = "unknown"; // Or you can use the blob.type as fallback 
      break; 
    } 

    return realMimeType; 
} 

Answer 3

können Sie versuchen, diese "stolen" Funktion:

function arrayBufferToBase64(buffer) { 
    let binary = ''; 
    const bytes = new Uint8Array(buffer); 
    const len = bytes.byteLength; 
    for (let i = 0; i < len; i++) { 
    binary += String.fromCharCode(bytes[i]); 
    } 
    return window.btoa(binary); 
}