JAVAScript奇淫技巧：隱寫術
本文將用JavaScript實現“圖片隱寫術”。
什么是隱寫術？
將文本或其它數據寫入圖片的技術，稱為“隱寫術”。
比如下面這張圖中，便隱藏著秘密信息，雖然看起來只是一張圖。
效果與用途
圖片隱寫術的效果是：可將信息寫入圖片，并可讀取。
可用于：在圖片中存放隱秘內容、給圖片做不可見的版權標識，等等。
技術原理
圖片，是由像素構成；像素都是由RGB（紅綠藍）三原色組成，比如css中用十六進制定義顏色：#FFFFFF。即紅綠藍各為FF。一個FF是轉為二進制，是8bit:11111111，如果修改最后一位，是不影響顏色以及圖片顯示的。正因如此，“隱寫術”會將要隱藏的信息，寫入到這個8bit的最后一位。
例如：要隱寫字符“a”，先轉化a為2進制："a".charCodeAt(0).toString(2)
得到值："01100001"，隱寫會進行如下操作：
用程序實現時，流程為：
1、讀取原圖，得到圖的像素級bit信息；
2、將要隱寫的信息，轉為2進制；
3、將二進制的隱寫信息，寫入到每個像素最后一位；
4、保存，生成新圖片。
要讀取信息時，獲取圖片像素最后一位，并轉二進制為字符信息。
源碼解析
以上介紹了技術原理，接下來，編程實現。先對源碼功能做介紹，最后將給出完整的功能源碼。
本例程源碼，將在一個html文件中實現，有html代碼和JavaScript代碼兩部分組成。
Html部分
html代碼有兩個組成部分：讀取圖片并隱寫內容、從隱寫圖片讀取信息。
JavaScript部分
初始化時，給圖片文件讀取、隱寫信息按鈕、讀取信息按鈕等頁面元素綁定操作函數：
選擇圖片后，顯示在畫布中：
將信息隱寫到圖片中：
核心代碼：隱寫操作：
隱寫時，將信息轉為二進制并保存到圖片各像素最低位。
前面是隱寫部分，接下來，是從隱寫圖片中讀取信息：
隱寫時，是將信息轉為二進制，此時是逆操作：
以上即是全部功能代碼。總計不到200行，實現了完整的隱寫和讀取。
實際應用時，隱寫部分和讀取信息部分，應該是獨立、分離使用的。
為了防止讀取邏輯被他人分析識破，可以對讀取隱寫的功能代碼做保護。
比如對下面這部分JS代碼，使用JShaman進行混淆加密：
JS代碼“隱寫”
在JShaman平臺，對代碼保護：
生成加密的代碼：
再復制回原位置：
這樣JS代碼將不能被分析，而運行不受影響。
運行效果
完整源碼
最后，附上完整源碼，保存為html文件即可使用。
選擇文件：
圖片預覽：
隱寫信息：
隱寫
隱寫圖片：
從隱寫圖片讀取信息
讀出的隱寫內容：
window.onload = function() {var input = document.getElementById('file');input.addEventListener('change', importImage);var encodeButton = document.getElementById('encode');encodeButton.addEventListener('click', encode);var decodeButton = document.getElementById('decode');decodeButton.addEventListener('click', decode);};var importImage = function(e) {var reader = new FileReader();reader.onload = function(event) {var img = new Image();img.onload = function() {var ctx = document.getElementById('canvas').getContext('2d');ctx.canvas.width = img.width;ctx.canvas.height = img.height;ctx.drawImage(img, 0, 0);};img.src = event.target.result;};reader.readAsDataURL(e.target.files[0]);};//隱寫并保存圖片var encode = function() {//信息var message = document.getElementById('message').value;//隱寫后的圖片var output = document.getElementById('output');//畫布var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');console.log(message)//是否超過能隱寫的最大量var pixelCount = ctx.canvas.width * ctx.canvas.height;if ((message.length + 1) * 16 > pixelCount * 4 * 0.75) {alert('內容太多了，超過了可寫入的最大量');return;}//核心函數：隱寫var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);encodeMessage(imgData.data, message);ctx.putImageData(imgData, 0, 0);alert('隱寫成功，信息已隱藏到圖片中');//顯示出隱寫后的圖片output.src = canvas.toDataURL();};//讀出隱寫的信息var decode = function() {var ctx = document.getElementById('canvas').getContext('2d');var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);//核心功能：從圖片數據中讀取隱寫信息var message = decodeMessage(imgData.data);alert(message)document.getElementById('messageDecoded').innerHTML = message;};//將二進制編碼信息轉為字符串var getNumberFromBits = function(bytes, history) {var number = 0, pos = 0;while (pos < 16) {var loc = getNextLocation(history, bytes.length);var bit = getBit(bytes[loc], 0);number = setBit(number, pos, bit);pos++;}return number;};var getNextLocation = function(history, total) {var pos = history.length;var loc = Math.abs(pos + 1) % total;while (true) {if (loc >= total) {loc = 0;} else if (history.indexOf(loc) >= 0) {loc++;} else if ((loc + 1) % 4 === 0) {loc++;} else {history.push(loc);return loc;}}};var setBit = function(number, location, bit) {return (number & ~(1 << location)) | (bit << location);};//將信息字符串轉為二進制編碼var getMessageBits = function(message) {var messageBits = [];for (var i = 0; i < message.length; i++) {var code = message.charCodeAt(i);messageBits = messageBits.concat(getBitsFromNumber(code));}return messageBits;};var getBitsFromNumber = function(number) {var bits = [];for (var i = 0; i < 16; i++) {bits.push(getBit(number, i));}return bits;};var getBit = function(number, location) {return ((number >> location) & 1);};var encodeMessage = function(colors, message) {var messageBits = getBitsFromNumber(message.length);messageBits = messageBits.concat(getMessageBits(message));var history = [];var pos = 0;while (pos < messageBits.length) {var loc = getNextLocation(history, colors.length);colors[loc] = setBit(colors[loc], 0, messageBits[pos]);while ((loc + 1) % 4 !== 0) {loc++;}colors[loc] = 255;pos++;}};var decodeMessage = function(colors) {/*Obfuscated by JShaman.com*/var _0x265a=['length','push','fromCharCode','join'];var _0x1c66=function(_0x265a55,_0x1c6643){_0x265a55=_0x265a55-0x0;var _0x2081ad=_0x265a[_0x265a55];return _0x2081ad;};var _0x2ad986=function(_0x5d3dbb,_0x36e20f,_0x4c778b,_0x1e11f6,_0x377eb9){return _0x1c66(_0x1e11f6- -0x169,_0x4c778b);};var _0xeb9032=function(_0x1ff9d9,_0x7ca6ec,_0x5d43c2,_0xaf192e,_0x146982){return _0x1c66(_0xaf192e- -0x169,_0x5d43c2);};var _0x4e4429=function(_0x1099e4,_0x3d47d8,_0x9623bb,_0x8f809f,_0x2632e4){return _0x1c66(_0x8f809f- -0x169,_0x9623bb);};var _0x3ab227=function(_0xe7a97,_0x3e4f1d,_0x3dc243,_0x7d20c1,_0x541a1b){return _0x1c66(_0x7d20c1- -0x169,_0x3dc243);};var history=[];var messageSize=getNumberFromBits(colors,history);if((messageSize+0x1)*0x10>colors[_0x2ad986(-0x167,-0x169,-0x168,-0x169,-0x16a)]*0.75){return'';}var message=[];for(var i=0x0;i
