(function() { let divDecodedImg = document.getElementById('divDecodedImg'), html = document.getElementsByTagName('html')[0], canvas = [], imgs = Object.values(document.getElementsByTagName('img')); if(!divDecodedImg) { divDecodedImg = document.createElement('div'); html.appendChild(divDecodedImg); }; divDecodedImg.textContent = ''; imgs.map((img) => { ['R', 'G', 'B'].map((oName, oPos)=>{ '0'.repeat(8).split('').map((bit, bitPos)=>{ try { let tmpCanvas = document.createElement('canvas'), context = null, bin = null, test = null; console.dir(img); tmpCanvas.width = img.offsetWidth; tmpCanvas.height = img.offsetHeight; context = tmpCanvas.getContext('2d'); context.drawImage(img, 0, 0); datas = context.getImageData(0,0, tmpCanvas.width, tmpCanvas.height); for (let i = 0; i <= datas.data.length-1; i+=4) { bin = datas.data[i+oPos].toString(2).split(''); test = bin[bitPos] == 1 ? true : false; for (var p = 0; p <= 2;p++) datas.data[i+p] = test ? 0 : 255; }; context.putImageData(datas, 0, 0); divDecodedImg.appendChild(tmpCanvas); } catch(e) {}; }); }); }); })();