/* ENCODE */ EncodeCurrentPicture = (function(text) { let canvas = document.createElement('canvas'), context = null, html = document.getElementsByTagName('html')[0], img = document.getElementsByTagName('img')[0], newImg = document.createElement('img'); secretMsg = text .split('').map(e=>'0000000'.concat(e.charCodeAt(0).toString(2)).substr(-8)) .join('').split('') html.appendChild(canvas); canvas.width = img.width; canvas.height = img.height; context = canvas.getContext('2d'); context.drawImage(img, 0, 0); datas = context.getImageData(0, 0, canvas.width, canvas.height); //Store in first px, in alpha octet the secretMsg size datas.data[3] = secretMsg.length / 8; console.log(datas.data[3] , text.length); for (var i = 4; secretMsg.length > 0; i+=4){ binChar = secretMsg.shift(); bin = '0000000'.concat(datas.data[i].toString(2)).substr(-8).split(''); bin[bin.length-1] = binChar; console.log(binChar, datas.data[i].toString(2), bin) datas.data[i] = parseInt(bin.join(''), 2); } context.putImageData(datas , 0, 0); newImg.src = canvas.toDataURL("image/png", 1); html.textContent = ''; html.appendChild(newImg); })('Ceci est un test') /* DECODE */ decodeCurrentPicture = (function() { let canvas = document.createElement('canvas'), context = null, html = document.getElementsByTagName('html')[0], img = document.getElementsByTagName('img')[0], newImg = document.createElement('img'); canvas.width = img.width; canvas.height = img.height; context = canvas.getContext('2d'); context.drawImage(img, 0, 0); datas = context.getImageData(0, 0, canvas.width, canvas.height); //Store in first px, in alpha octet the secretMsg size secretMsgSize = datas.data[3] * 8; tmpBinSecretMsg = ''; for (var i = 4; secretMsgSize != tmpBinSecretMsg.length; i+=4){ bin = datas.data[i].toString(2).split(''); tmpBinSecretMsg = tmpBinSecretMsg.concat(bin[bin.length-1]); } console.log(tmpBinSecretMsg.match(/[0-1]{8}/g).map(e=>{ console.log(tmpBinSecretMsg); return String.fromCharCode(parseInt(e, 2)) }).join('')) })()