javascript – 使用reader.readAsArrayBuffer(文件)获取图像base64

我试图在base64字符串中获取图像的内容.

最初我是用readAsDataURL而不是because I want to validate the mimetype on the client side做的,似乎我必须使用readAsArrayBuffer,同样指出on this site.

所以我以前工作得很好：

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

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

Reproduction online

现在我添加了mimetype验证,我有以下内容：

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字符串)

解决方法

我发现这样做的唯一方法是使用两个不同的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>