本篇文章主要介绍了"圣诞节，把你的 JavaScript 代码都装扮成圣诞树吧"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
用开源项目将你的 JavaScript 变成圣诞树吧！效果的话，可以去看一下我们公司的官网（http://www.souche.com ），里面涉及到的js代码...
用开源项目将你的 JavaScript 变成圣诞树吧！
效果的话，可以去看一下我们公司的官网（http://www.souche.com ），里面涉及到的js代码在今天大部分被临时替换成了圣诞树，打开每个js代码即可看到效果。
其实也不神奇，我们使用了自己写的一个nodejs库，如果您要实现这样的效果，只需要按照下面第一章节的方法即可。当然您也可以在线压缩代码：http://f2e.souche.com/cheniu/js2image.html
下面分两章节，分别讲解如何使用js2image这个库 和 js2image这个库的原理。
- github地址：https://github.com/xinyu198736/js2image ps:求star
- 在线转换地址：http://f2e.souche.com/cheniu/js2image.html
js2image使用
github地址：https://github.com/xinyu198736/js2image 欢迎送上star或者follow。
js2image主要有两个比较特殊的特性：
- 将任意js源码 压缩成 用代码堆砌成图形的最终代码。例如圣诞树，圣诞老人，代码和图片都可以自定义。
- 压缩后的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个要点。
- 从图片生成字符画，这个有现成的库。
- 把js代码分割成一小块一小块，尽量小，然后用逐行填充的方式分别替换到上一步生成的字符画里去。
- js代码中有诸多不能分开的语法，分块的时候要把这些语法保留在一个块内。这个是这个库的难点所在，也是代码最多最绕的地方。
稍有想法的同学估计看到这里基本已经明白是怎么回事了，下面一一讲解这3个要点。
