Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5017
  • 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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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