• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5173
  • Last Modified:

JavaScript, Base64 image decoding and display

I would like to use JavaScript to decode a base64 encoded string and display it as a image in a browser, is that possible with JavaScript?
0
gzjimfan
Asked:
gzjimfan
  • 2
1 Solution
 
bpmurrayCommented:
Yes.

You're very vague, so it's difficult to be more specific. I'll assume that you can send the Base64 data to the client, so you can do something like:

      var Picture = document.createElement('img');
       Picture.src = 'data:image/gif;base64,' + myBase64Data;

Then you insert this where you want it.
0
 
gzjimfanAuthor Commented:
OK, let me explain my question again.

The server encodes the bitmap into base64 string, send to the client through a XML document, the client decodes it in JavaScript and needs to display the bitmap image in the browser. Therefore I guess I will need instructions on the client side to:

(1) do base64 decoding to a binary object
(2) display image in the browser
0
 
bpmurrayCommented:
I don't have a lot of time right now, but try something like:

<html><head>
<script type="text/javascript">
   function showThePicture(myBase64Data) {
      var picture = document.createElement('img');
      picture.src = 'data:image/gif;base64,' + myBase64Data;
      var div = document.getElementById("mydiv");
      div.appendChild(Picture);
      return true;
   }
</script>
</head><body>
<div id="mydiv" style="width:20%; height:20%;background-color: red;"></div>
<input type="button" value="Pic" onclick="return showThePicture('R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAALAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D');">
</body></html>
0
 
SpinxIncCommented:
Hey,
its not working properly,
you have to do something...

thanks,
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now