<img id="dot" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQYV2NkYGBg+A9GEMDIwMDIiCwAlyBeEJuZAE0nCgAM/yMwAAAAAElFTkSuQmCC"
alt="Red dot"/>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<img id="test">
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)));
}
Also see: Tab Triggers