使用reader.readAsArrayBuffer獲取圖像base64（文件）

Question

我試圖在base64字符串中獲取圖像的內容。

本來我是用readAsDataURL但是because I want to validate the mimetype on the client side這樣做的，看來我不得不用readAsArrayBuffer也指出on this site。

所以prevoiusly我有這個工作的罰款：

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

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

Reproduction online

現在我加入了MIME類型的驗證，我有以下幾點：

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（不得到的base64字符串）

Answer 1

我發現的唯一途徑這樣做是使用兩個不同的FileReader個實例，一個在另一箇中。

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

我還沒有管理使用base64，但我找到了一種方法來使用blob。 如果您使用base64找到一種方法，請添加您的答案。

現在我的圖像串看起來是這樣的，我相信會產生我一些問題：

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

---

我從一個小提琴提示有關how to render a retrieved image as a blob URL

然後我剛剛應用我的代碼與a little improvement和瞧！

Reproduction online 在IE> 9，Chrome瀏覽器，Firefox的工作......

整個代碼：

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

你可以試試這個"stolen"功能：

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