點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
前言
隱寫術算是一種加密技術，權威的wiki說法是“隱寫術是一門關於信息隱藏的技巧與科學，所謂信息隱藏指的是不讓除預期的接收者之外的任何人知曉信息的傳遞事件或者信息的內容。”這看似高大上的定義，並不是近代新誕生的技術，早在13世紀末德國人Trithemius就寫出了《隱寫術》的著作，學過密碼學的同學可能知道。好了，說了這麼多，隱寫術到底是什麼技術，讓我們看一個例子。
JavaScript圖片隱寫術 - 圖片加入看不見的版權文字
大家看“崔永元”這張照片和普通的圖片一樣，沒什麼區別，其實圖片是加密過的。
簡單的說，上述的處理過程可以理解為對圖片像素的處理，也就是說，加密的信息散佈在每個像素點上。可是，13世紀還沒有“像素”這個概念吧？！沒錯，上面這個例子只是隱寫術的一個現代技術實現，隱藏信息的手段有很多，我們日常的鈔票防偽也算是隱寫術的一種，所以標題上也限定了我們的討論範圍——圖片隱寫術。
JavaScript圖片隱寫術 - 圖片加入看不見的版權文字
聚焦到載體為圖片的隱寫術，一起來從前端角度分析其技術原理。
我們知道圖片的像素信息裡存儲著RGB的色值，R、G、B分別為該像素的紅、綠、藍通道，每個通道的分量值範圍在0~255，16進制則是00~FF。在CSS中經常使用其16進制形式，比如指定博客頭部背景色為#A9D5F4。其中R（紅色）的16進制值為A9，換算成十進制為169。這時候，對R分量的值+1，即為170，整個像素RGB值為#AAD5F4，別說你看不出差別，就連火眼金金的“像素眼”設計師都察覺不出來呢。於此同時，修改G、B的分量值，也是我們無法察覺的。因此可以得出重要結論：RGB分量值的小量變動，是肉眼無法分辨的，不影響對圖片的識別。
有了這個結論，那就給我們了利用空間，常用手段的就是對二進制最低位進行操作，下面就用canvas來演示一下。
解開圖中的秘密
JavaScript圖片隱寫術 - 圖片加入看不見的版權文字
還是“崔永元”的這張照片，為了讓例子足夠簡單，裡面的R通道分量被我加入了文本信息，想知道其中的信息，可以跟我用canvas代碼來解開。
首先在頁面加入一個canvas標籤，並獲取到其上下文。
接著將圖片先繪製在畫布上，然後獲取其像素數據。
JavaScript圖片隱寫術 - 圖片加入看不見的版權文字
JavaScript圖片隱寫術 - 圖片加入看不見的版權文字
這個一維數組存儲了所有的像素信息，一共有 256 * 256 * 4 = 262144個值。其中4個值一組，為什麼呢？在瀏覽器中解析圖片，除了RGB值外，每組第4個值為透明度值，即像素信息實際為大家熟知的rgba值。
這裡的解密規則是對R通道進行處理，R的分量最低位為1則該像素設為紅色，R的分量最低位為0則該像素設為黑色，直接看代碼實現，完成後我們再繪製到canvas，即可看到結果。
JavaScript圖片隱寫術 - 圖片加入看不見的版權文字
在img onload事件中調用processData方法，就可以看到結果啦。
// 上面有些，直接調用processData方法
img.onload = function() {
...
processData(originalData);
};
得到的結果可能是這個樣子的。在這裡我也默默的支持一下“崔永元” 。
JavaScript圖片隱寫術 - 圖片加入看不見的版權文字
在圖片中隱藏信息
講了基礎的解密過程，再來反向說說加密過程。
既然要在圖片中加入文字信息，那麼首先要獲取文字的像素信息，這裡我先用canvas在畫布上打印文字，獲取像素信息。
JavaScript圖片隱寫術 - 圖片加入看不見的版權文字
先保存文字的像素信息，接著加載圖片獲取其像素信息，然後對兩組像素進行處理，我在這裡抽離了一個公共方法。
JavaScript圖片隱寫術 - 圖片加入看不見的版權文字
上述代碼做的是，接受要隱藏的數據以及隱藏的顏色通道，然後對原圖進行操作，修改圖片該通道分量的最低位，如果有文字信息，則最低位置為1，否則為0。從最文章開頭的結論知道，RGB的三個通道可以分別隱藏不同信息。
在img.onload中調用mergeData(textData, 'R')，處理好圖像後，只要在瀏覽器中的canvas上右鍵保存圖片即可。
這裡的例子比較簡單，只展示了基本的最低位隱藏文本信息，像二維碼這些簡單圖形也可以這麼處理。現實中隱藏畫中畫則需要更專業的圖像處理算法，這裡就不再展開了。
價值
圖片隱寫術的應用價值很廣泛，比如程序員之間的表白（不限男女），不失為一種浪漫的方式~
有個成功案例就是大眾點評通過這種方式，成功證明食神app對其圖片的盜用，為自己的合法權益進行了有效維護。
結語
在這裡，我重申一下 崔永元就是正義的化身，是時代的英雄，我們向你致敬！
公告
閱讀更多 web秀 的文章
