javascript圖片隱寫術，感覺可以用它來干點有想法的事情

1、什么是圖片隱寫術？

權威的wiki說法是“隱寫術是一門關於信息隱藏的技巧與科學，所謂信息隱藏指的是不讓除預期的接收者之外的任何人知曉信息的傳遞事件或者信息的內容。”，圖片隱寫術簡而言之就是利用圖片來隱藏某些數據，讓人一眼看去以為是很普通很正常的圖片，但其實里面隱藏着某些“機密”數據。

據傳911事件里，KB份子就是通過黃色圖片來傳遞信息而躲過了FBI的監控。還有大眾點評也是通過圖片隱寫術來保護自身合法權益。所以圖片隱寫術是一個雙刃劍，就看你用它做什么了。

比如下面這張圖片：

看起來是一張很漂亮的風景照片，但其實它里面卻藏着一張美女圖（注：美女圖片來源於淘寶某店），如下：

是不是很驚艷？看得你熱血沸騰鼻血都往外沖呢？這就是圖片隱寫術的歷害之處，“機密”隱藏於無形之中！

2、圖片隱寫術是怎么做到的？

　　圖片隱寫有多種方式，我這里介紹的是采用圖片的最低有效位（LSB）進行隱寫。其原理就是圖片的像素點都是由三原色（RGB）構成（如下圖），由這三原色可以組成各種顏色，如CSS里的顏色定義#FFFFFF，即是三原色的16進制值寫法，每個顏色各占用8bit。而LSB隱寫就是修改像素中每個顏色值的最低位值，而這些修改，人眼一般是分辨不出來的，從而達到數據隱藏的目的。

　　譬如我們想把’A’隱藏進來的話，如下圖，就可以把A轉成16進制的0x61再轉成二進制的01100001，再修改為紅色通道的最低位為這些二進制串。

（注：以上圖片和示例來源於Wooyun）

3、Javascript實現的圖片隱寫術

　　代碼項目見GitHub： https://github.com/kingthy/imagemask

在線演示 https://ipfs.io/ipfs/QmUG1TKotQYsp6bSw6pX4crFWfhJRNTnJre7buEaYYBV72
使用示例

 
                    < 
                    script  
                    type="text/javascript" src="imagemask.js"></ 
                    script 
                    > 
                   
                    < 
                    script  
                    type="text/javascript"> 
                   
                    var mask = new ImageMask({ 
                   
                    debug: false,   //是否開啟調試模式 
                   
                    charSize: 16,   //字符的字節位數，默認為16，即字符最大值為0xFFFF 
                   
                    mixCount: 2,    //隱寫數據要混合到圖片顏色值里的最低位數，值范圍在1-5，默認為2，如果大於3，則圖片會失真很嚴重 
                   
                    lengthSize: 24  //數據長度值的占用字節位數，默認為24，也即數據長度最大值為16777215 
                   
                    }); 
                   
                    </ 
                    script 
                    >

隱寫文本

 
                    //腳本里傳入頁面的canvas對象和要隱寫的文本 
                   
                    var output = document.getElementById('output'); 
                   
                    var canvas = document.getElementById('canvas'); 
                   
                    mask.hideText(canvas, '要隱寫的文本'); 
                   
                    output.src = canvas.toDataURL();

隱寫文件

 
                    //腳本里傳入頁面的canvas對象和要隱寫的文件 
                   
                    var  
                    output = document.getElementById( 
                    'output' 
                    ); 
                   
                    var  
                    canvas = document.getElementById( 
                    'canvas' 
                    ); 
                   
                    var  
                    file = document.getElementById( 
                    'file' 
                    ); 
                   
                    mask.hideFile(canvas, file.files[0], ,  
                    function 
                    (result){ 
                   
                    if 
                    (result.success){ 
                   
                    output.src = canvas.toDataURL(); 
                   
                    } 
                    else 
                    { 
                   
                    alert(result.message); 
                   
                    } 
                   
                    });

讀出圖片里隱寫的文本

 
                    var  
                    canvas = document.getElementById( 
                    'canvas' 
                    ); 
                   
                    var  
                    message = mask.revealText(canvas);

讀出圖片里隱寫的文件

 
                    var  
                    canvas = document.getElementById( 
                    'canvas' 
                    ); 
                   
                    var  
                    file = mask.revealFile(canvas);        
                    //file.name = 文件名稱， file.data = 文件數據