Lấy image64 bằng reader.readAsArrayBuffer (tập tin)

Question

Tôi đang cố gắng lấy nội dung của hình ảnh trong chuỗi base64.

Ban đầu tôi đã làm điều đó với readAsDataURL nhưng because I want to validate the mimetype on the client side, có vẻ như tôi phải sử dụng readAsArrayBuffer cũng như chỉ ra on this site.

Vì vậy prevoiusly Tôi có điều này làm việc tốt:

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

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

Reproduction online

Bây giờ tôi thêm xác nhận Mimetype và tôi đã điều sau đây:

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 (không nhận được chuỗi base64)

Answer 1

Cách duy nhất tôi tìm thấy làm việc đó là sử dụng hai khác nhau FileReader trường hợp, một trong những khác.

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

Tôi chưa quản lý để sử dụng base64 nhưng tôi đã tìm cách để thực hiện việc đó bằng cách sử dụng blob. Nếu bạn tìm cách để làm điều đó bằng cách sử dụng base64 vui lòng thêm câu trả lời của bạn.

Ngay bây giờ chuỗi hình ảnh của tôi trông như thế này, mà tôi tin rằng sẽ tạo ra cho tôi một số vấn đề:

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

---

tôi đã gợi ý từ một fiddle về how to render a retrieved image as a blob URL

Sau đó, tôi mới chỉ áp dụng vào mã của tôi với a little improvement và thì đấy !!

Reproduction online Làm việc trong IE> 9, Chrome, Firefox ...

Tổng số các mã:

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

Bạn có thể thử "stolen" chức năng này:

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