这张64*64见方的图片实际上包含了一段4K大小的JavaScript脚本的信息。
加解密的原理如下：
加密的图片生成，解密的图片信息读取，都是借助canvas实现的。
canvasAPI中的putImageData可以用来生成图片；canvasAPI中的getImageData可以用来读取图片中的像素信息。
对于通过web生成的数据，我们处理相对简单一些，因为都在同一个web平台上。
如果是本地开发的源代码想要加密呢？
则需要借助本地工具对这些文件进行图片格式转换，对于前端开发同学而言，可以自己写一个node.js小工具。
下面这段node.js代码就是我自己写自己用的，大家有兴趣可以作为参考：
file2Img('colorful-min.js');然后执行：
本地实现麻烦之处看代码量，似乎觉得本地文件转图片也是洒洒水的程度。
我自己折腾了好几个小时，完全按照官方的步骤，一个个的安装，甚至为了安装node-gyp，还下载了占用了3.29G的MicrosoftVisualC++BuildTools，结果还是狗屎。
什么binding.gypnotfound，c2373__pfnDliNotifyHook2之类错误。
我跟大家讲，官方的安装教程，很不靠谱，漏了一个非常重要的东西。
第1步并不是安装node-gyp，而是升级Node.js到最新版。
然后，我使用的是2.0的用法，默认安装还是1.x版本，因此，canvas包安装时候，要走下面：
npminstallcanvas@next三、解密图片并执行实际案例下面这段JS可以对图片进行解密并直接执行其对应的JavaScript脚本：
varjsParseImg=function(l,g){vare=document.createElement("img"),f=document.createElement("canvas");e.onload=function(){f.width=this.width;f.height=this.height;vara=f.getContext("2d");a.drawImage(this,0,0,this.width,this.height);for(vara=a.getImageData(0,0,this.width,this.height),e=a.data.length,h=[],b=0;b jsParseImg(imgurl,callback);其中，imgurl只图片的URL地址，可以是普通协议地址，也可以是base64地址，甚至是Blob地址；callback为解密并解析成功后的回调。 但，这并不妨碍我们执行： jsParseImg('colorful-min.png',function(){colorfulBackground({container:document.getElementById('container'),animation:false,size:[400,800]});});来实现我们想要的效果。 想必那些喜欢扒代码的伸手党，看了这个页面之后，一定是一脸懵逼。 有小伙伴可能会担心，加密和解密的东西呀，最宝贵的就是算法了，你这里基本上原封不动就暴露了，那基本上就没啥用了呀。 这个其实大可不必担心。 本文所展示的颜色处理只是抛砖引玉，属于最基本最简单的，从头往后线性的颜色绘制。 如果在实际项目中应用，肯定就不会想这么简单的策略了。 颜色信息的起点可以从中间，圆环的形式；或者逐行绘制的方式。 或者更近一步，每一个像素点藏更多的信息。因为字符最大Unicode编码是65535，但是一个像素点RGBA所能包含的数值范围信息是256^4，也就是4294967296，完全不是一个数量级的。如果采用像素通道组合方式，一个像素点藏2个字符信息，是完全可行的。一个像素通道范围0~255，其中两个组合，则范围大小256*256为65536，排除掉认为是无效像素信息的0,0组合正好涵盖65535。 这样，图片的尺寸可以进一步缩小。 本文展示的JS和生成图片尺寸对比为：3.94KVS5.33K。静态资源成本是有所增加的，如何权衡，还要看大家自己。 所以标题才有“瞎折腾”字样。自己玩一玩试验试验，实际上实际开发的估计很少使用。但是用的少，并不一定没有价值，说不定遇到特殊项目特殊场景，就能高光一把。