本文分两章节，离别解说怎样运用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 。这个库的作用是用指定的字符来复原一个图象。而我们用这个库来天生一个用 ☃字符和空格 离别示意黑和白的字符画，然后将字符画的每一行剖析成数组的一个元素，供第二步运用，这就是我们中心天生的一个struct，代码见 utils/image-to-struct.js

② 支解js源码成只管小的小块。

这是非常主要的一步，js代码详细能够剖析成多细的小块呢？

看下面一段代码：

                            !function             
                            (e,t             
                            ){ (             
                           "objec"           
                          +"t")  ==           
                         typeof           
                       module &&  (         
                      "objec"+"t")           
                    == typeof module         
                  .exports?module.       
                exports=e.document?t(e       
              ,!0):function(e){if(!e.     
            document) throw new Error (     
          ("jQuer"+"y req"+"uires"+" a wi"   
       +"ndow "+"with "+"a doc"+"ument") )   
    ; return t (e)}:t(e)}( ("undef"+"ined") 
    !=typeof    window ?window:this,function(e,t){var   

这是jQuery最先的一段代码,能够看到，大部分操作符都许可中心插进去恣意多的空格或许换行，我们恰是运用这一特征将js代码解肢，然后拼接成恣意外形的图片。

中心代码实在就是一个正则，我们用这个正则把js源码解组成一个数组，然后后续依据每行须要的字符数，从这个数组里不停取片断出来拼接。

//星散代码，以可支解单元拆分成数组。var lines = hold_code.replace(/([^a-zA-Z_0-9=!|&$])/g,"\n$1\n").split("\n");
有了这个lines数组以后背面就简朴了，依据第一步里天生的struct不停遍历从lines抽取代码添补到struct里即可天生终究的代码：
while(lines.length>0){
    //轮回往struct里添补代码
    struct.forEach(function(s){
        var chars_arr = s.replace(/ +/g," ");//一行有多组星散的*****
        var r = s;
        chars_arr.split(/ +/).forEach(function(chars){
            if(chars.length == 0){
                return;
            }
            var char_count = chars.length;
            //从lines里掏出char_count数目的代码来添补,不一定精准,要确保断行准确
            var l = pickFromLines(lines,char_count);

            r = r.replace(chars,function(){
                return l;
            })
        })
        result += r+"\n"
    })

}

③ 保存不可支解的语法

注重：到了这一步，还很早，你剖析出来的代码是没法运转的，许多不能换行和加空格的代码都被你离开了，自然会报错，那怎样处置惩罚这些状况呢？

这一步，我们做的事变就是：

在实行代码分拆之前，提掏出代码里一切不可支解的语法，将他们保存在一个对象中，并且在源代码顶用占位符替换这些语法，然后让占位符介入上个步骤的星散，由于占位符是一个完全的连字符变量，所以不会被支解。在支解完成以后，我们再把这些占位符替换返来即可。

不过，在js中哪些语法必需是衔接在一起才一般运转的呢？

这里总结下：

1. 字符串不可支解 包含双引号单引号内的内容。

2. 正则表达式相对不可支解 正则里的转义很难处置惩罚，这是这个算法里的难点。

3. 运算操作符 包含2字符的3字符的 比方 以下两种

var double_operator = ["==", ">=", "<=", "+=", "-=", "*=", "/=", "%=", "++", "--", "&&", "||", ">>", "<<"]
var three_operator = ['===', '!==']

一些牢固语法，能够用正则表达，以下：

var reg_operator = [
    {
        start:"return",
        reg:/^return[^a-zA-Z_0-1"'][a-zA-Z_0-1.]+/ // return 0.1 或许 return function 或许return aaabb
    },
    {
        start:"return\"",
        reg:/^return".*?"/ // return "d" 或许 return ""
    },
    {
        start:"return\'",
        reg:/^return'.*?'/  // return 'd' 或许 return ''
    },
    {
        start:"throw",
        reg:/^throw [a-zA-Z_0-1]+?/ //throw new 或许 throw obj 
    }
]

小数点语法，比方 0.01 由于之前我们用点号来支解代码的，然则这里的点号不能作为支解符运用，须要保存前后数字跟点号在一行
其他语法，比方 value++ 之类的语法，变量和操作符之间不可支解。
那我们怎样从源代码中解析出这些语法，然后做处置惩罚呢？

中心代码均在 utils/keep-line.js 中

中心算法，事实上是经由过程一个对字符串的遍向来完成的，然后在遍历每一个字符的时刻都邑推断是不是进入某个逻辑来腾跃处置惩罚。

比方，推断出当前在双引号内，则进入字符串提取逻辑，一直到字符串完毕的时刻再继承一般的遍历。

其他操作符和正则表达式的算法也是相似，不过内里许多细节须要处置惩罚，比方转义字符之类的。

有些比较特别的，比方小数点语法的提取，在推断到当前字符是点号以后，须要往前和向后轮回查找数字，然后把全部语法找出来。

这里不细讲，在keep-line.js 这个文件中又一大坨代码做这个事变的。

④ 字符串解构

做到这一步的时刻，实在效果已很不错了，也能够保证代码的可运转，然则代码里有些字符串很长，他们老是会被被保存在一行里，如许就形成他会影响一些图案的边沿的准确性（代码星散原则是越细越好，就是为这个斟酌）。

我们怎样处置惩罚呢，那就是将字符串解构，以5个为单元将字符串星散成小块。

这里有两个比较主要的题目须要处置惩罚；

1. 字符串内的转义字符怎样处置惩罚，另有一些特别字符，比方0x01如许的字符，这些字符不能被星散到差别的字符串里，所以星散的时刻要保存这些字符串的完全性。

2. 字符串星散成小字符串，然后用+号拼接起来，不过要注重操作符优先级的题目，所以一切星散后的字符串，都要用括号包起来，让这个+号的优先级永久最高。
   详细算法见 keep-line.js 中的 splitDoubleQuot （星散双引号字符串）。

结语

至此，全部运用就完成了，能够顺利完成从恣意js和图象天生图形代码了。

再说一遍项目开源地点：https://github.com/xinyu198736/js2image 迎接star，趁便follow下楼主就更高兴了。