(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, binPos = null;
                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('');
                    binPos = bin.length - bitPos;
                    test = bin[binPos > 1 ? binPos : 0] == 1 ? true : false;
                    for (var p = 0; p <= 2;p++) 
                        datas.data[i+p] = test ? 255 : 0;
                };
                context.fillStyle='#FFF';
                context.fillRect(0, 0, tmpCanvas.width , tmpCanvas.height);
                context.putImageData(datas, 0, 0);
                divDecodedImg.appendChild(tmpCanvas);
                } catch(e) { console.log(e) };
                
            });
        });
    });
})();