Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Showing base64 encoded images

Posted on 2006-07-06
21
Medium Priority
?
589 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
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 2000 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

722 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