圣诞节,把网站所有的js代码都压缩成圣诞树吧。

本文分两章节,分别讲解如何使用js2image这个库生成可以运行的圣诞树代码 和 js2image的原理。

github地址:https://github.com/xinyu198736/js2image ps:求star

在线转换地址:http://f2e.souche.com/cheniu/js2image.html

效果的话,可以去看一下我们公司的官网(http://www.souche.com ),里面涉及到的js代码在今天大部分被临时替换成了圣诞树,打开每个js代码即可看到效果。

其实也不神奇,我们使用了自己写的一个nodejs库,如果您要实现这样的效果,只需要按照下面第一章节的方法即可。当然您也可以在线压缩代码: http://f2e.souche.com/cheniu/js2image.html

下面分两章节,分别讲解如何使用js2image这个库 和 js2image这个库的原理。

js2image使用

github地址:https://github.com/xinyu198736/js2image 欢迎送上star或者follow。

js2image主要有两个比较特殊的特性:

  1. 将任意js源码 压缩成 用代码堆砌成图形的最终代码。例如圣诞树,圣诞老人,代码和图片都可以自定义。
  2. 压缩后的js代码格式虽然被破坏,但是仍然可以运行。这个是关键点!

压缩后的示例可以查看这些js(均来自搜车官网) http://assets.souche.com/assets/js/souche.js souche主脚本
http://assets.souche.com/assets/js/lib/jquery-1.7.1.min.js jquery 1.7.1
http://assets.souche.com/assets/js/lib/mustache.js mustache

使用方式很简单:

npm install js2image -g;  

然后在存在js的文件夹中执行:

js2image -s ./resource/jquery.js  

或者针对某个目录下所有的js执行(慎用),会深度遍历此目录里所有的js文件然后压缩出.xmas.js后缀的结果文件。

js2image -s ./resource/  

即可生成一个对应的 **.xmas.js 的文件。

如果要将js2image集成到gulp或者其他nodes项目中,可以使用用模块的形式:

var Js2Image = require("js2image");//获取结果的    codeJs2Image.getCode("./resource/jquery.js","./resource/tree.png",{}).then(function(code){  
   console.log(code);
})

更多的信息可以参照github上的文档。

如果只是要使用这个效果,看到这里就ok啦,下面讲解这个库的原理,有些地方可能比较绕。

js2image实现原理

js2image的实现从宏观来说,大体只有3个要点。

  1. 从图片生成字符画,这个有现成的库。
  2. 把js代码分割成一小块一小块,尽量小,然后用逐行填充的方式分别替换到上一步生成的字符画里去。
  3. js代码中有诸多不能分开的语法,分块的时候要把这些语法保留在一个块内。这个是这个库的难点所在,也是代码最多最绕的地方。

稍有想法的同学估计看到这里基本已经明白是怎么回事了,下面一一讲解这3个要点。

① 从图片生成2值得字符画

这里用到了一个现成的npm包:image-to-ascii 。这个库的作用是用指定的字符来还原一个图像。而我们用这个库来生成一个用 ☃字符和空格 分别表示黑和白的字符画,然后将字符画的每一行分解成数组的一个