Base64 Encoder and Decoder with JavaScript

System-Registry-48x48 From wikipedia:The term “Base64″ refers to a specific MIME content transfer encoding. It is also used as a generic term for any similar encoding scheme that encodes binary data by treating it numerically and translating it into a base 64 representation. The particular choice of base is due to the history of character set encoding: one can choose 64 characters that are both part of the subset common to most encodings, and also printable. This combination leaves the data unlikely to be modified in transit through systems, such as email, which were traditionally not 8-bit clean.


The precise choice of characters is difficult. The earliest instances of this type of encoding were created for dialup communication between systems running the same OS – e.g. Uuencode for UNIX, BinHex for the TRS-80 (later adapted for the Macintosh) – and could therefore make more assumptions about what characters were safe to use. For instance, Uuencode uses uppercase letters, digits, and many punctuation characters, but no lowercase, since UNIX was sometimes used with terminals that did not support distinct letter case. Unfortunately for interoperability with non-UNIX systems, some of the punctuation characters do not exist in other traditional character sets. The MIME Base64 encoding replaces most of the punctuation characters with the lowercase letters, a reasonable requirement by the time it was designed.

MIME Base64 uses A–Z, a–z, and 0–9 for the first 62 digits. There are other similar systems, usually derived from Base64, that share this property but differ in the symbols chosen for the last two digits; an example is UTF-7.

The code below shows the function declaration and how to use it.And you can see online demo at here(you can right click to see all source)

<html>
  <head>
     <title>base64 Encoding/Decoding</title>
  </head>

  <script type="text/javascript">
  <!--

  var keyStr = "ABCDEFGHIJKLMNOP" +
               "QRSTUVWXYZabcdef" +
               "ghijklmnopqrstuv" +
               "wxyz0123456789+/" +
               "=";

  function encode64(input) {
     input = escape(input);
     var output = "";
     var chr1, chr2, chr3 = "";
     var enc1, enc2, enc3, enc4 = "";
     var i = 0;

     do {
        chr1 = input.charCodeAt(i++);
        chr2 = input.charCodeAt(i++);
        chr3 = input.charCodeAt(i++);

        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;
        }

        output = output +
           keyStr.charAt(enc1) +
           keyStr.charAt(enc2) +
           keyStr.charAt(enc3) +
           keyStr.charAt(enc4);
        chr1 = chr2 = chr3 = "";
        enc1 = enc2 = enc3 = enc4 = "";
     } while (i < input.length);

     return output;
  }

  function decode64(input) {
     var output = "";
     var chr1, chr2, chr3 = "";
     var enc1, enc2, enc3, enc4 = "";
     var i = 0;

     // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
     var base64test = /[^A-Za-z0-9\+\/\=]/g;
     if (base64test.exec(input)) {
        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.");
     }
     input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

     do {
        enc1 = keyStr.indexOf(input.charAt(i++));
        enc2 = keyStr.indexOf(input.charAt(i++));
        enc3 = keyStr.indexOf(input.charAt(i++));
        enc4 = keyStr.indexOf(input.charAt(i++));

        chr1 = (enc1 << 2) | (enc2 >> 4);
        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
        chr3 = ((enc3 & 3) << 6) | enc4;

        output = output + String.fromCharCode(chr1);

        if (enc3 != 64) {
           output = output + String.fromCharCode(chr2);
        }
        if (enc4 != 64) {
           output = output + String.fromCharCode(chr3);
        }

        chr1 = chr2 = chr3 = "";
        enc1 = enc2 = enc3 = enc4 = "";

     } while (i < input.length);

     return unescape(output);
  }

  //--></script>

  <body>

     <form name="base64Form">

        Type in the message you want to encode in base64, or paste<br>
        base64 encoded text into the text field, select Encode or Decode, <br>
        and click the button!<br>

        <textarea name="theText" cols="40" rows="6"></textarea><br>

        <input type="button" name="encode" value="Encode to base64"
           onClick="document.base64Form.theText.value=encode64(document.base64Form.theText.value);">

        <input type="button" name="decode" value="Decode from base64"
           onClick="document.base64Form.theText.value=decode64(document.base64Form.theText.value);">

     </form>

  </body>
</html>
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

13 Responses to “Base64 Encoder and Decoder with JavaScript”

  1. [...] base64 encoder and decoder with javascript [...]

  2. [...] another way would be to use JavaScript, see for example Base64 Encoder and Decoder with JavaScript. Also perl would be a very good candidate and in particular the MIME::Decoder module with the [...]

  3. [...] another way would be to use JavaScript, see for example Base64 Encoder and Decoder with JavaScript. Also, PERL would be a very good candidate, and in particular the MIME::Decoder module with the [...]

  4. Adam Corum says:

    Why did you URL encode in the first line of the encode64 function? I fail to see how this is needed for MIME base64.

  5. Adam Corum says:

    Also this function encode64 cannot handle a ” string

  6. Stephan Beal says:

    Very nice! i will (later today) attempt to use this to pass complete JavaScripts around inside JSON-encoded strings (where i don’t want to use the raw JS because of the escaping involved).

    Can we get a clear license text (or disclaimer of copyright)?

    :)

  7. Denis says:

    Same as Stephan. :-)
    What is the licence of this piece of code ?

  8. [...] previous Base64 Encoder and Decoder with JavaScript, we have learned something about base64. “Base64″ refers to a specific MIME content transfer [...]

  9. Sniper says:

    function decode_base64(s) {
    var e={},i,k,v=[],r=”,w=String.fromCharCode;
    var n=[[65,91],[97,123],[48,58],[47,48],[43,44]];

    for(z in n){for(i=n[z][0];i<n[z][1];i++){v.push(w(i));}}
    for(i=0;i<64;i++){e[v[i]]=i;}

    for(i=0;i<s.length;i+=72){
    var b=0,c,x,l=0,o=s.substring(i,i+72);
    for(x=0;x<o.length;x++){
    c=e[o.charAt(x)];b=(b<=8){r+=w((b>>>(l-=8))%256);}
    }
    }
    return r;
    }

  10. jsGuru says:

    You can use this website http://www.online-toolz.com/

  11. Hussain says:

    Thanks a lot!!!:D
    the replace regular expression saved my life.

  12. Derek says:

    How about btoa() and atob()? These are native JavaScript Base64 en/decoder.

Leave a Reply