イメージをbase64で取得するreader.readAsArrayBuffer（file）

Question

イメージの内容をbase64文字列で取得しようとしています。

は、もともと私はreadAsDataURLしかしbecause I want to validate the mimetype on the client sideでそれをやっていた、私もon this siteを指摘したようにreadAsArrayBufferを使用する必要がありそうです。今、私はMIMEタイプの検証を追加し、私は、次のしている

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

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

Reproduction online

を：：

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文字列を取得していないのでprevoiusly私はこの正常に動作していた

）

Answer 1

私が見つけた唯一の方法それをすることの2つの異なる使用することでしたインスタンス、一方は他方のインスタンスです。

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とvoilaで私のコードに！ IE> 9、クロム、Firefoxでの作業

Reproduction online ...

全体コード：

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"機能試すことができます：あなたは魔法のBのリストを手に入れた

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