像素化你的代码

发表于 5年以前 | 总阅读数：1508 次

本文正式开始前，先跟大家玩一个小游戏：点击代码下方的「在新窗口运行以上代码」按钮，找找 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 的噪点图：

md5 image

这张图片是如何产生的呢？下面列举一下详细步骤，也就是具体的编码过程。

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：