起因

高级浏览器支持data协议，如：

参考：http://en.wikipedia.org/wiki/Data:_URL

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC"/>

<script   src = "data:text/javascript;base64,YWxlcnQoJ2h0dHA6Ly93ZWliby5jb20venN3YW5nJyk7" ></script>

不光是<img>标签，<script>、<style>、<iframe>也都支持data协议；

data协议可以表示图片、文本、音视频等各种二进制数据

另html5的canvas除了绘制图像，还能读写每一个像素值

一种把脚本存到图像中的思路就有了。

经过

最初的尝试就是把每个字符挨个放到像素的r、g、b、a里
需要处理的问题：

1、计算图片的尺寸；

     本来想用高度为1，宽度为字符串长度的尺寸，但考虑到压缩比和美观，所以决定生成正方形。