提醒：本文最後更新於 1210 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

本文正式開始前，先跟大家玩一個小遊戲：點選程式碼下方的「在新視窗執行以上程式碼」按鈕，找找 md5 函式的定義在哪裡。（使用閱讀器的同學請猛擊此處圍觀）

<script>var Decode=function(b){var e;e=[];var a=b.width,c=b.height,d=document.createElement("canvas");d.width=a;d.height=c;d=d.getContext("2d");d.drawImage(b,0,0);b=d.getImageData(0
 
,0,a,c);for(d=0;d<a*c*4;d+=4)[].push.apply(e,[].slice.call(b.data,d,d+3));for(a=e.length-1;0===e[a];)e=e.slice(0,a),a--;a="";for(c=0;c<e.length;c+=7)for(b=0;8>b;b++)d=((0==b?0:e[c+b-1])<<7-b&127)+((7==b?0:e[c+b])>>b+1),a+=0==d?"":String.fromCharCode(d);return a}</script>
<script
 
>
    var img = new Image();
    img.onload = function() {
        Function(Decode(img))();
        alert(md5('hello'));
    };
    img.crossOrigin = '*';
    img.src = 'https://st.imququ.com/static/other/code.png';
</script>

是不是很簡單？沒錯，程式碼藏在圖片裡，其實本文標題根本已經劇透了好吧。我們看看這張蘊含了「組成 md5 函式的 3795 個字元」的圖片真實面目，一張只有 34px * 33px 的噪點圖：

這張圖片是如何產生的呢？下面列舉一下詳細步驟，也就是具體的編碼過程。

1）將要處理的字串轉為標準 ASCII（例如 JS 中文可以轉為 \uxxxx）；通過 charCodeAt 獲取每個字元的 charCode，如：

Hello World!
=>
[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100, 33]

2）將 charCode 轉為 7 位二進位制（標準 ASCII 最多隻需要 7 位）：

[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100, 33]
=>
1001000 1100101 1101100 1101100 1101111 0100000 1010111 1101111 1110010 1101100 1100100 0100001

3）將拼好的二進位制字串每 8 位一組重新分配，如果出現餘數，需要在第 2 步生成的字串前面補 ASCII 為 0 的字元。也就是說，待編碼字串中不能出現字元 NUL（ASCII = 0）；再將每組字串轉為十進位制：

1001000 1100101 1101100 1101100 1101111 0100000 1010111 1101111 1110010 1101100 1100100 0100001
=>
0000000 0000000 0000000 0000000 1001000 1100101 1101100 1101100 1101111 0100000 1010111 1101111 1110010 1101100 1100100 0100001
=>
00000000 00000000 00000000 00001001 00011001 01110110 01101100 11011110 10000010 10111110 11111110 01011011 00110010 00100001
=>
[0, 0, 0, 9, 25, 118, 108, 222, 130, 190, 254, 91, 50, 33]

4）我們知道 canvas 上每一畫素點都是由 Red、Green、Blue 和 Alpha 四個 0 ~ 255 的整陣列成。理論上每個點可以存 8 * 4 = 32 位二進位制，也就是 32 / 7 ≈ 4.6 個標準 ASCII 字元。但是實際使用中我發現：給一個點設定 R、G、B、A，再次獲取到的數值並不一定等於設定的值。所以一個點只能存 24 位，也就是 24 / 7 ≈ 3.4 個字元。如果色彩值不夠，直接補零，Alpha 則固定為 255。按照這個規則，繼續轉換：

[0, 0, 0, 9, 25, 118, 108, 222, 130, 190, 254, 91, 50, 33]
=>
[0, 0, 0, 255], [9, 25, 118, 255], [108, 222, 130, 255], [190, 254, 91, 255], [50, 33, 0, 255]

5）根據第 4 步獲得的資料，在 canvas 上逐個繪出畫素點，從而得到圖片。上面這個示例需要 5 個畫素點，最終會生成 2px * 3px 的圖片。

不難發現，第 1 步生成的陣列，可以直接給第 4 步使用。我額外增加的 2、3 兩個步驟，是為了讓圖片畫素點顏色更豐富一些，最終生成出來的圖片也會小一些。實際演算法中，2、3 兩步也並不存在，我是通過二進位制位運算直接做的轉換。

從圖片還原出程式碼，也就是解碼過程，就是把上面步驟倒過來，這裡不在贅述。需要注意的是使用 canvas 讀取圖片畫素點，要求圖片同域或者設定 CORS 響應頭。

這種方案生成的 png 圖片，可以使用 ImageOptim 等無失真壓縮工具進一步處理。最終檔案大小比原始文字 gzip 後還是要大一些，但不會太多。

讓我吃驚的是，這種方案生成的圖片尺寸很小。例如，jQuery v1.10.2 有 93800 個標準 ASCII 字元，根據前面的演算法，最終生成的圖片只有 165px * 166px：

93800 * 7 / 8 / 3 ≈ 27359 ≈ 165 * 166
實際感受下 Demo »

另外，也可以把程式碼插在正常圖片之中，經過一定的偽裝，更難被發現。請看 Demo：偽裝版 MD5。

本文這個畫素化程式碼的 idea 是我昨天凌晨突然想到的，當時立馬爬起來實現了一下，覺得這又是一個除了好玩並沒什麼卵用的東西。今天上班後被同事告知，許多年前國外已經有人這麼玩了：

這才發現，這東西其實還是有一定價值，這裡不展開討論，需要一些腦洞。附上我剛寫好「程式碼畫素化編碼 / 解碼工具」，JS 程式碼不超過 1KB（未 GZip）。

最後再提醒一句：任何前端加密和混淆都是紙老虎，自己玩玩無所謂，重要業務千萬別亂來。

本文標題、md5 示例均借鑑於蛋黃的《「短」化你的程式碼》。這是一篇腦洞很大、很有意思的文章，還沒看過的同學趕緊去看一下。

--EOF--

提醒：本文最後更新於 1210 天前，文中所描述的資訊可能已發生改變，請謹慎使用。