像素化你的代码

❗ 本文最后更新于 3381 天前，文中所描述的信息可能已发生改变，请谨慎使用。

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

<script>var Decode=function(b){var e=[],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/uploads/2015/09/code.png';
</script>

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

注：使用 Brave 浏览器运行本文中的代码，很可能无法获得预期的效果。这是因为 Brave 为了防止将 Canvas 用作浏览器指纹识别，对 Canvas 的 getImageData 返回值做了修改。

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

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 示例均借鉴于蛋黄的《「短」化你的代码》。这是一篇脑洞很大、很有意思的文章，还没看过的同学赶紧去看一下。

本文链接：https://imququ.com/post/code2png-encoder.html，参与评论 »

--EOF--

发表于 2015-09-19 00:24:20，并被添加「Canvas」标签。查看本文 Markdown 版本 »

本站使用「署名 4.0 国际」创作共享协议，相关说明 »

JerryQu 的博客

专题「好玩的 HTML5」的其他文章 »

Comments