一張圖片能隱含千言萬語之隱藏你的程式碼_html5教學技巧

我最近開發了我的第一個網頁遊戲：一個HTML5的視訊智力遊戲。開發的過程很有趣，我喜歡編程，但當實現了遊戲邏輯後，我有了一個有趣的想法：為什麼不想一個辦法把程式碼隱藏起來？起初我想到的是一些很簡單的做法，例如禁止上下文選單，以防右鍵點擊時可以查看頁面原始碼。但這毫無意義，右鍵選單不能用，人們仍然可以透過鍵盤快捷鍵或選單列裡的「檢視原始檔」來觀看原始碼。

一張圖片能隱含千言萬語

這依賴於圖片的體積。但我決定要把原始碼加密存放到一張圖片裡。 HTML5的畫布(canvas)元件很適合做這種事情，因為它支援針對影像像素的操作。一個像素由四個值(通道)來表示：紅，綠，藍和alpha通道。它們的值的分佈範圍是從0到255。我的Javascript程式碼就是一個個的字符，每個字符都有一個ASCII對應值。 ASCII值的範圍也是0-255，所以，我想做的是，遍歷畫布上的每個像素，給每個像素設定3個代碼字元的ASCII值作為它的RGB值，你可以透過charCodeAt函數輕鬆的取出這些字元。

複製程式碼

程式碼如下:

.charCodeAt(0)( 🎜>
生成的是一張色彩斑斕、很小的圖片，它就是我的程式碼看看吧:

解碼的時候，我只需要把這個圖片畫到畫布上，遍歷像素點，取出r,g,b值所代表的字元：

複製程式碼程式碼如下:

String.fromCharCode(code)

把它們連接成一個大的字串，這就是你的程式碼了——可執行的程式碼。

這樣就能保護你的原始碼了嗎？
其實不能－一個有經驗的(甚至沒有經驗的)程式設計師仍然能夠知道如何去解碼圖片，取出裡面的程式碼，但我想這是能防止那些懷著不良商業目的人偷竊你的程式碼的第一步措施－而那些能夠想出如何解碼的程式設計師(大部分)都不是來剽竊的


這種方法的主要缺陷
這種技術只能應用在支援HTML5畫布(canvas)技術的現代瀏覽器裡，IE6、IE8 裡肯定是不行的。甚至有些現代的瀏覽器對於圖片的alpha通道的編碼也有支援問題，所以，每個像素點你只能放3個字元－一個100×100大小的圖片可以存放3萬個文字字元。
你還有其它簡單的能防止別人拷貝你的程式碼的方法嗎？我們當然可以把字元進行加密，但如何確保你的解密步驟能不被人輕易的破解呢？告訴我你的想法吧！