Encode / Decode Base64

by gkohen

HTML

<!-- Demo: http://jsfiddle.net/onigetoc/mth9f8o1/ -->
<h1>Base64 Encode / Decode</h1>

<div>
  <h4><button id="encode">Encode</button> Text / Image to Base64:</h4>
  <textarea id="decodedArea" cols="55" rows="6"></textarea>
</div>
<div>
  <h4><button id="decode">Decode</button> Base64 Decode:</h4>
  <textarea id="encodedArea" cols="55" rows="14"></textarea>
</div>

CSS

button {
  margin-bottom: 10px;
  margin-right: 18px
}

h4 {
  margin-bottom: 8px;
}

JavaScript

function encode() {
  $("#encodedArea").val(window.btoa($("#decodedArea").val()))
}

function decode() {
  $("#decodedArea").val(window.atob($("#encodedArea").val()))
}

$("#decodedArea").val("Hello World");

encode();
//decode();

$("#encode").click(encode);
$("#decode").click(decode);