url是圖像，但瀏覽器顯示base64編碼

Question

我正在嘗試將圖像從javascript上傳到Windows Azure Blob存儲。

我成功上傳了所有Blob塊，並且可以提交Blobk Blob列表。

但是，當我嘗試導航到該圖像時，我得到了它的base64編碼，並且瀏覽器無法將其呈現為圖像。

您可以在這里嘗試： base64圖片

如何在瀏覽器中顯示？ 我必須下載該字符串並使用

<img src="data:image/jpeg;base64," />

標簽？

如何快速下載圖像？

謝謝您的幫助。

在這里，您可以看到帶有鏈接的復制和粘貼的JSFiddle

https://jsfiddle.net/66e47znh/

---

編輯：代碼

我用來讀取文件的代碼段：

var reader = new FileReader();
reader.onload = function(e){
    var data = reader.result;
    var binary = '';
    var bytes = new Uint8Array(data);
    var len = bytes.byteLength;

    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }

    var toSend = {
        ext : fileExt,
        file : btoa(binary)
    };
    UploadManager.startBlobUpload("newspic", toSend.file, toSend.ext, {
       //Callbacks when the upload finish
    });

};
var file = document.getElementById("image").files[0];
var fileName = file.name;
var fileExt = fileName.substr(fileName.lastIndexOf(".")+1);
reader.readAsArrayBuffer(file);

我用來讀取文件塊的代碼段

UploadManager.blobUrl = sasQuery.blobUrl;
UploadManager.submitUri = UploadManager.blobUrl + "?" + sasQuery.sasQueryString;

//File reader   
UploadManager.reader = new FileReader();

UploadManager.reader.onload = function(e){
    var data = UploadManager.reader.result;     
    UploadManager.uploadSlicedChunk(data);

};

var fileContent = file.slice(UploadManager.currentFilePointer, 
UploadManager.currentFilePointer + UploadManager.maxBlockSize);


UploadManager.reader.readAsArrayBuffer(new Blob([fileContent]), {type : 'image/'+UploadManager.fileExt, endings : 'native'});

我用來上傳塊的代碼段

var num = '' + UploadManager.blockIdCounter;
while(num.length < 10){
    num = '0'+num; 
}

var blockId = btoa("block-"+num);

var uri = UploadManager.submitUri.substr(0,4)+UploadManager.submitUri.substr(4, UploadManager.submitUri.length)
        +"&comp=block&blockId="+blockId;
uri = uri.replace(":80", "");   
var requestData = new Uint16Array(data);


var ajaxOption = {
    url : uri,
    type : "PUT",
    data : requestData,
    headers : { "Access-Control-Request-Headers" : "x-requested-with" },
    crossDomain : true,
    processData : false,
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
        xhr.setRequestHeader("Content-Type", UploadManager.fileType);
        xhr.setRequestHeader('Content-Length', requestData.length);
        xhr.withCredentials = true;
    },

    success : function (data, status) {

        //Upoad successfull -> update everything.
        UploadManager.blockIds.push(blockId);
        UploadManager.blockIdCounter += 1;
        UploadManager.bytesSent += requestData.length;
        UploadManager.currentFilePointer += UploadManager.maxBlockSize;
        UploadManager.totalRemainingBytes -= UploadManager.maxBlockSize;
        if(UploadManager.totalRemainingBytes < UploadManager.maxBlockSize){
            UploadManager.maxBlockSize = UploadManager.totalRemainingBytes;
        }

        //Prepare next upload;                  
        var percentComplete = ((parseFloat(UploadManager.bytesSent) / parseFloat(UploadManager.fileLen)) * 100).toFixed(2);
        if(UploadManager.totalRemainingBytes > 0){
            var fileContent = UploadManager.file.slice(UploadManager.currentFilePointer, 
                    UploadManager.currentFilePointer+UploadManager.maxBlockSize);
            UploadManager.reader.readAsArrayBuffer(new Blob([fileContent]), {type : 'image/'+UploadManager.fileExt, endings : 'native'});
        } else {
            UploadManager.commitBlob();
        }

    },
    error : function(jqXHR, status, error){
        alert(status + ", "+error+": "+jqXHR.responseText);
    }
};

$.ajax(ajaxOption);

Answer 1

可以，請看筆

http://codepen.io/cakeinpanic/pen/LVGpRb

也適用於jpg, png, jpeg