Solved

Showing base64 encoded images

Posted on 2006-07-06
21
574 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
  • 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
 
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now