Untitled

            
              
window.onload = function onImgLoad() {
  var canvas = document.getElementById("myCanvas");
  var img = document.getElementById("dot");
  
  canvas.setAttribute("width", img.naturalWidth + "px");
  canvas.setAttribute("height", img.naturalHeight + "px");

  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);


  var d = ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight);

  var test = document.getElementById("test");
  test.src = "data:image/jpeg;base64," + myEncode(d).join('');
  
  // decode base64 string without 'data:image/png;base64,'
   decodeBase64ToChar(img.src.substr(22));
  console.log(d.data.length);
}

function myEncode(d) {
  var base64chars =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  var b = d.data.reduce(function(str, i) {
    var bStr = i.toString(2);
    for (var i = 0; i < 8 - bStr.length; i++) {
      bStr = "0" + bStr;
    }
    str += bStr;
    return str;
  }, "");
  var arr_6bit = [];
  var i = 0;
  while (i * 6 < b.length) {
    arr_6bit.push(b.substr(i * 6, 6));
    i++;
  }
  console.log(arr_6bit);
  return arr_6bit.map(bit => base64chars[parseInt(bit, 2)]);
}


function decodeBase64ToChar(base64) {
    var base64chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var six_bit_arr = base64.split('').map(char => {
        var index = base64chars.indexOf(char);
        var six_bit = index.toString(2);
        while(six_bit.length < 6) {
            six_bit = '0' + six_bit;
        }
        return six_bit;
    });
    var eight_bit_arr = [];
    var six_bit_str = six_bit_arr.join('');
    console.log(six_bit_arr);
    while(eight_bit_arr.length * 8 < six_bit_str.length) {
        eight_bit_arr.push(six_bit_str.substr(eight_bit_arr.length * 8, 8));
    }
    
    console.log(eight_bit_arr.map(x => parseInt(x, 2)));
}