將文件讀取到blob並在javascript中顯示

Question

所以我試圖創建一個功能的基本原型。實質上，最終目標是接收Base64編碼的字符串和支持MIME類型，並生成該文件並從HTML 5 APP提供。現在我正在簡單地獲取一個文件，把它變成一個Blob，然後顯示它，全部從內存中。

var blobfile = atob(base64); 
    window.blobFromBlob = new Blob([binaryString], { 
    type: MIMEType 
    }); 
    window.blobURL = URL.createObjectURL(window.blobFromBlob); 
    var a = "<a href=\"" + window.blobURL + "\">Binary Blob Link</a>"; 
    document.getElementById('byte_content').innerHTML = a; 

我創建了一個JSFiddle來顯示我遇到的問題。當我把它放入JPEG時，然後嘗試提供它，img標籤顯示損壞的圖像。 Base64 blob我從來沒有想到會工作，但是我希望能夠工作的base64中的Binary blob和blob。

任何人都可以看到我要去哪裏錯了嗎？

謝謝！

注：我設法得到二進制一個由readAsBinaryString更改爲readAsArrayBuffer

注2顯示：我開始懷疑它是與atob和btoa

Answer 1

所以櫃面任何人其他人絆倒了這一點，發現它很有用我可以在this stackoverflow article的幫助下解決這個問題。該解決方案涉及將readAsBinaryString作爲文件讀取方法。使用btoa創建Base64字符串，然後使用mentioned stackoverflow article中的b64toBlob函數。

這裏是調整後的JSFiddle來展示我如何使它工作。

https://jsfiddle.net/ajwhiteway/vstj3bcm/1/