image - Read file to blob and display in javascript - Stack Overflow

admin管理员组

文章数量:1289541

So I'm trying to create a basic prototype of a functionality. Essentially the end goal is to receive a Base64 encoded string and a support mime type and generate the file and serve it up from a HTML 5 APP. For now I'm working on simple getting a file, turning it into a Blob, and then displaying it, all from memory.

   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;

I've created a JSFiddle to show what I'm having trouble with. When I put, say a JPEG, into it and then try to serve it up the img tags show corrupt images. The Base64 blob I never expect to work, but the Binary blob and blob from base 64 I do expect to work.

Can anyone see where I'm going wrong?

Thanks!

NOTE: I managed to get the binary one to display by changing from readAsBinaryString to readAsArrayBuffer

NOTE 2: I'm beginning to suspect it has something to do with atob and btoa

So I'm trying to create a basic prototype of a functionality. Essentially the end goal is to receive a Base64 encoded string and a support mime type and generate the file and serve it up from a HTML 5 APP. For now I'm working on simple getting a file, turning it into a Blob, and then displaying it, all from memory.

   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;

I've created a JSFiddle to show what I'm having trouble with. When I put, say a JPEG, into it and then try to serve it up the img tags show corrupt images. The Base64 blob I never expect to work, but the Binary blob and blob from base 64 I do expect to work.

Can anyone see where I'm going wrong?

Thanks!

NOTE: I managed to get the binary one to display by changing from readAsBinaryString to readAsArrayBuffer

NOTE 2: I'm beginning to suspect it has something to do with atob and btoa

• javascript
• image
• pdf
• blob

Share Improve this question Follow edited Feb 24, 2016 at 16:39 Ajwhiteway asked Feb 24, 2016 at 15:36 AjwhitewayAjwhiteway 1,00611 gold badge1111 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

So incase anyone else stumbles upon this and finds it useful I was able to solve this with help from this stackoverflow article. The solution involves leaving readAsBinaryString as the file reading method. Create the Base64 string with btoa and then use b64toBlob function found in the mentioned stackoverflow article.

Here is the adjusted JSFiddle to show how I got it to work.

https://jsfiddle/ajwhiteway/vstj3bcm/1/

本文标签： imageRead file to blob and display in javascriptStack Overflow