Solved

Showing base64 encoded images

Posted on 2006-07-06
21
586 Views
Last Modified: 2008-02-01
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
Comment
Question by:EddieShipman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 9
  • 3
21 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 17051376
What image format are upper image data?
Are they type: image/gif
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17051715

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
 
LVL 26

Author Comment

by:EddieShipman
ID: 17052484
Oh, there is no way to use a src attribute like:
"javascript:decode(image_data);"
0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17053629

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
 
LVL 63

Expert Comment

by:Zvonko
ID: 17054050
What is the image format of upper image data?
0
 
LVL 26

Author Comment

by:EddieShipman
ID: 17054186
What does the format have to do with it?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17054257
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
 
LVL 26

Author Comment

by:EddieShipman
ID: 17054258
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
 
LVL 26

Author Comment

by:EddieShipman
ID: 17054291
Do you have something in mind?
0
 
LVL 26

Author Comment

by:EddieShipman
ID: 17054301
[quote]Don't you think it matters whether it is gif, jpeg or png?[/quote]
No, the IMG tag doesn't care.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17054311
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
 
LVL 26

Author Comment

by:EddieShipman
ID: 17054347
[quote]except, of course, IE.[/quote]

too bad...most users use IE...
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 17054446
0
 
LVL 26

Author Comment

by:EddieShipman
ID: 17058439
Exactly what I was looking for.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17058499
:-)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17058524
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
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17058741


How interesting!  sorry i discouraged you!  
0
 
LVL 26

Author Comment

by:EddieShipman
ID: 17059462
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 17059615
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
 
LVL 26

Author Comment

by:EddieShipman
ID: 17060416
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 17060434
Oh, OK, then does text not help much. You need some sort of sprite generator.
0

Featured Post

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month10 days, 19 hours left to enroll

628 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question