转载

像素化你的代码

本文正式开始前，先跟大家玩一个小游戏吧：点击代码下方的「在新窗口运行以上代码」按钮，找找 md5 函数的定义在哪里。（使用阅读器的同学请猛击此处围观）

<script>function Decoder(a){this.img=a}Decoder.prototype=function(){var a=function(a,b){var c=a.length;if(c>=b)return a;for(var d="0",e=1;b-c>e;e++)d+="0";return d+=a},b=function(a){var b=[],c=a.width,d=a.height,e=document.createElement("canvas");e.width=c,e.height=d;var f=e.getContext("2d");f.drawImage(a,0,0);for(var g=f.getImageData(0,0,c,d),h=0;c*d*4>h;h+=4){var i=g.data[h],j=g.data[h+1],k=g.data[h+2];b.push(i,j,k)}for(var l=b.length,h=l-1;0==b[h];h--)l--;return b.slice(0,l)},c=function(b){for(var c="",d=0;d<b.length;d++)c+=a(b[d].toString(2),8);return c},d=function(a){for(var b=parseInt(a.length/7,10),c="",d=0;b>d;d++){var e;e=b-1>d?a.substr(7*d,7):a.substr(7*d).replace(/^(/d*)(/d{8})$/,function(a,b,c){return b+c.replace(/^0+/g,"")}),e=String.fromCharCode(parseInt(e,2)),c+=e}return c};return{toStr:function(){var a=this.img,e=b(a),f=c(e),g=d(f);return g}}}();</script> <script>  var img = new Image();  img.onload = function() {   Function(new Decoder(img).toStr())();   alert(md5('hello'));  };  img.crossOrigin = '*';  img.src = '/static/other/md5.png'; </script>

是不是很简单？没错，代码藏在图片里，其实本文标题根本已经剧透了好吧。我们看看这张蕴含了「组成 md5 函数的 3795 个字符」的图片真实面目，一张只有 33px * 34px 的噪点图：

像素化你的代码

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

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 位一组重新分配，如果最后一组长度不够，继续在左侧补零。再将每组字符串转为十进制（范围 0 ~ 255）：

1001000 1100101 1101100 1101100 1101111 0100000 1010111 1101111 1110010 1101100 1100100 0100001

10010001 10010111 01100110 11001101 11101000 00101011 11101111 11100101 10110011 00100010 00000001

[145, 151, 102, 205, 232, 43, 239, 229, 179, 34, 1]

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。按照这个规则，继续转换：

[145, 151, 102, 205, 232, 43, 239, 229, 179, 34, 1]

[145, 151, 102, 255] [205, 232, 43, 255] [239, 229, 179, 255] [34, 1, 0, 255]

5）根据第 4 步获得的数据，在 canvas 上逐个绘出像素点，从而得到图片。上面这个示例需要 4 个像素点，最终会生成 2px * 2px 的图片。

不难发现，第 1 步生成的数组，可以直接给第 4 步使用。我额外增加的 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 是我昨天凌晨突然想到的，当时立马爬起来实现了一下，觉得这又是一个除了好玩并没什么卵用的东西。今天上班后被同事告知，许多年前国外已经有人这么玩了：