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

Showing base64 encoded images

I have an image, base64 encoded into a string. How would I show it in my HTML page?
Here is my base64.js file:

//First things first, set up our array that we are going to use.
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" + //all caps
"abcdefghijklmnopqrstuvwxyz" + //all lowercase
"0123456789+/="; // all numbers plus +/=

//Heres the encode function
function encode64(inp) {
  var out = ""; //This is the output
  var chr1, chr2, chr3 = ""; //These are the 3 bytes to be encoded
  var enc1, enc2, enc3, enc4 = ""; //These are the 4 encoded bytes
  var i = 0; //Position counter
 
  do { //Set up the loop here
    chr1 = inp.charCodeAt(i++); //Grab the first byte
    chr2 = inp.charCodeAt(i++); //Grab the second byte
    chr3 = inp.charCodeAt(i++); //Grab the third byte
 
    //Here is the actual base64 encode part.
    //There really is only one way to do it.
    enc1 = chr1 >> 2;
    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
    enc4 = chr3 & 63;
 
    if (isNaN(chr2)) {
      enc3 = enc4 = 64;
    } else if (isNaN(chr3)) {
      enc4 = 64;
    }
 
    //Lets spit out the 4 encoded bytes
    out = out + keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) +
    keyStr.charAt(enc4);
 
    // OK, now clean out the variables used.
    chr1 = chr2 = chr3 = "";
    enc1 = enc2 = enc3 = enc4 = "";
  } while (i < inp.length); //And finish off the loop
 
  //Now return the encoded values.
  return out;
}

//Heres the decode function
function decode64(inp) {
  var out = ""; //This is the output
  var chr1, chr2, chr3 = ""; //These are the 3 decoded bytes
  var enc1, enc2, enc3, enc4 = ""; //These are the 4 bytes to be decoded
  var i = 0; //Position counter
 
  // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
  var base64test = /[^A-Za-z0-9\+\/\=]/g;
 
  if (base64test.exec(inp)) { //Do some error checking
  alert("There were invalid base64 characters in the input text.\n" +
  "Valid base64 characters are A-Z, a-z, 0-9, ?+?, ?/?, and ?=?\n" +
  "Expect errors in decoding.");
  }
  inp = inp.replace(/[^A-Za-z0-9\+\/\=]/g, "");
 
  do { //Here’s the decode loop.
 
    //Grab 4 bytes of encoded content.
    enc1 = keyStr.indexOf(inp.charAt(i++));
    enc2 = keyStr.indexOf(inp.charAt(i++));
    enc3 = keyStr.indexOf(inp.charAt(i++));
    enc4 = keyStr.indexOf(inp.charAt(i++));
   
    //Heres the decode part. There’s really only one way to do it.
    chr1 = (enc1 << 2) | (enc2 >> 4);
    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
    chr3 = ((enc3 & 3) << 6) | enc4;
   
    //Start to output decoded content
    out = out + String.fromCharCode(chr1);
   
    if (enc3 != 64) {
      out = out + String.fromCharCode(chr2);
    }
    if (enc4 != 64) {
      out = out + String.fromCharCode(chr3);
    }
   
    //now clean out the variables used
    chr1 = chr2 = chr3 = "";
    enc1 = enc2 = enc3 = enc4 = "";
   
  } while (i < inp.length); //finish off the loop
 
  //Now return the decoded values.
  return out;
}

Here is my base64 encoded image data:
image_data =
"/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRof
Hh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/wAALCAHSABgBAREA/8QAHwAA
AQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQR
BRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RF
RkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ip
qrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/9oACAEB
AAA/APfKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKg3N6n
86Nzep/Ojc3qfzpKKKTcvqPzo3L6j86Ny+o/OuE/4T/S/wDn8j/76o/4T/S/+fyP/vqj/hP9
L/5/I/8AvquH/wCFeaN/z7y/9/G/xo/4V5o3/PvL/wB/G/xo/wCFeaN/z7y/9/G/xr0TZB/e
/WjZB/e/WjZB/e/Wrm6L/nkv5Ubov+eS/lRui/55L+VO3RelG6L0o3RelY3lyep/Wjy5PU/r
R5cnqf1qXY3pRsb0o2N6VqfJ/s0fJ/s0fJ/s14d/ZvxL/wCek3/kP/4qj+zfiX/z0m/8h/8A
xVH9m/Ev/npN/wCQ/wD4qvaPsi/3T+dH2Rf7p/Oj7Iv90/nTd1z6j86N1z6j86N1z6j86vfZ
x7fnR9nHt+dH2ce351L9oaj7Q1H2hqn8tfU0eWvqaPLX1NN2ye/50bZPf86Nsnv+dS0UUeS3
q350eS3q350eS3q351YoooooqbYvpRsX0o2L6U6iiiiinbG9KNjelGxvSpqKKqedJ/cf86PO
k/uP+dHnSf3H/Op9if3v1o2J/e/WjYn979aTy29RR5beoo8tvUVLRRRRRXF/8J7J/wBC7rv/
AIB//Xo/4T2T/oXdd/8AAP8A+vR/wnsn/Qu67/4B/wD167PavoPyo2r6D8qNq+g/Kloooooo
ooorhfClx4avfFM8vhq805YobeWGdLe4V5r996ZnkAO5ghUqJHyXMrkYBDSd1T8D0owPSjA9
K//Z";
 
0
Eddie Shipman
Asked:
Eddie Shipman
  • 9
  • 9
  • 3
1 Solution
 
ZvonkoSystems architectCommented:
What image format are upper image data?
Are they type: image/gif
0
 
0h4crying0utloudCommented:

Strange question  :)

You cannot display an image whose source data is generated by js (without going to a server program).  

The image object has no supporting methods or props and you cannot write image data to a new window, iframe etc.

If you have to generate the image on the client for some reason, then you can use an applet.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Oh, there is no way to use a src attribute like:
"javascript:decode(image_data);"
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
0h4crying0utloudCommented:

No, sorry,...  whatever is returned from the javascript function will not be used for the src value.

you can reference a sever program that generagtes the image data but the src attibute must have some kind of URL value to display an image.
0
 
ZvonkoSystems architectCommented:
What is the image format of upper image data?
0
 
Eddie ShipmanAll-around developerAuthor Commented:
What does the format have to do with it?
0
 
ZvonkoSystems architectCommented:
I think you want to show an image on the page. Don't you think it matters whether it is gif, jpeg or png?
0
 
Eddie ShipmanAll-around developerAuthor Commented:
I believe it is GIF, let me check...I can't really tell, try using this instead, it is a gif:
image_data =
"R0lGODlhEAAWAPcAAAAAAAAAMwAAZgAAmQAAzAAA/zMAADMAMzMAZjMAmTMAzDMA/2YAAGYAM2YAZmYAmWYAzGYA/5kAAJkAM5kAZpkAmZkAzJkA/8wAAMwAM8wAZswAmcwAzMwA//8AAP8AM/8AZv8Amf8AzP8A/wAzAAAzMwAzZgAzmQAzzAAz/zMzADMzMzMzZjMzmTMzzDMz/2YzAGYzM2YzZmYzmWYzzGYz/5kzAJkzM5kzZpkzmZkzzJkz/8wzAMwzM8wzZswzmcwzzMwz//8zAP8zM/8zZv8zmf8zzP8z/wBmAABmMwBmZgBmmQBmzABm/zNmADNmMzNmZjNmmTNmzDNm/2ZmAGZmM2ZmZmZmmWZmzGZm/5lmAJlmM5lmZplmmZlmzJlm/8xmAMxmM8xmZsxmmcxmzMxm//9mAP9mM/9mZv9mmf9mzP9m/wCZAACZMwCZZgCZmQCZzACZ/zOZADOZMzOZZjOZmTOZzDOZ/2aZAGaZM2aZZmaZmWaZzGaZ/5mZAJmZM5mZZpmZmZmZzJmZ/8yZAMyZM8yZZsyZmcyZzMyZ//+ZAP+ZM/+ZZv+Zmf+ZzP+Z/wDMAADMMwDMZgDMmQDMzADM/zPMADPMMzPMZjPMmTPMzDPM/2bMAGbMM2bMZmbMmWbMzGbM/5nMAJnMM5nMZpnMmZnMzJnM/8zMAMzMM8zMZszMmczMzMzM///MAP/MM//MZv/Mmf/MzP/M/wD/AAD/MwD/ZgD/mQD/zAD//zP/ADP/MzP/ZjP/mTP/zDP//2b/AGb/M2b/Zmb/mWb/zGb//5n/AJn/M5n/Zpn/mZn/zJn//8z/AMz/M8z/Zsz/mcz/zMz/////AP//M///Zv//mf//zP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAEAAWAAAIXAABCBxIsKDAEiUAIFSYcOFChhAdNkxosCJBiREnHtSI8aFFiwulSQMgkuTIhyFHlizp8aNBlhphCpSZEqLLijVXnqSYU+XOmzg5JpSZESJRoBeFmlxatCdSggEBADs=";


0
 
Eddie ShipmanAll-around developerAuthor Commented:
Do you have something in mind?
0
 
Eddie ShipmanAll-around developerAuthor Commented:
[quote]Don't you think it matters whether it is gif, jpeg or png?[/quote]
No, the IMG tag doesn't care.
0
 
ZvonkoSystems architectCommented:
I wanted only to look at your images but did not succeed in decodig it :)
All I wanted to test is this: http://www.lsc.ufsc.br/~luizd/base64-to-mhtml/workaround.html
0
 
Eddie ShipmanAll-around developerAuthor Commented:
[quote]except, of course, IE.[/quote]

too bad...most users use IE...
0
 
ZvonkoSystems architectCommented:
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Exactly what I was looking for.
0
 
ZvonkoSystems architectCommented:
:-)
0
 
ZvonkoSystems architectCommented:
Just for the Eyecatcher this was the img tag not working in IE:

 <IMG src='data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPb
            WLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVr
            ApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KT
            kpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxM
            AF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=' width="81" height="85">


0
 
0h4crying0utloudCommented:


How interesting!  sorry i discouraged you!  
0
 
Eddie ShipmanAll-around developerAuthor Commented:
I thought I had seen soemthing like that before. I just couldn't remember it.
I am going to write a PHP based counter to do this and not have to use GD
or ImageMagik.

0
 
ZvonkoSystems architectCommented:
For counters there are optimized load modules which produce the image stream for the image tags with the text you like.
For PHP I did not use one, but on my mainframe machine I use this:
<IMG alt="for vate 1" src="/voting/getvote.cgi?pollid=P050720&amp;qnum=1&amp;vnum=1" border=0>

The CGI creates the image stream with call to a modul like this:
say "Location: /cgi-bin/text2gif?BG="color"&Text="sep""count""sep

That script is REXX and basicaly id does a redirect to modul /cgi-bin/text2gif  which displays my text with some bgColor.
Definition of that modul is this:
service /cgi-bin/text2gif*   /usr/lpp/internet/bin/htcounter.so:HTCounter*

I did not search for it, but when it exists for mainframe then for sure you will find it for PC too.


0
 
Eddie ShipmanAll-around developerAuthor Commented:
Actually, it is not really a counter but a "scoreboard" for a fantasy football (US) website.
It will look like a stadium scoreboard, very nice.
0
 
ZvonkoSystems architectCommented:
Oh, OK, then does text not help much. You need some sort of sprite generator.
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

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

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