圣诞夜,让你的代码都变成圣诞树吧!

今天是圣诞夜,有多少小伙伴是出去过节了呢?当然肯定有更多的小伙伴是等着和TJ君一起分享圣诞夜的编码快乐!

既然是圣诞夜,那我们今天怎么也要聊聊和圣诞有关的东西,对不对?

那么你以为TJ君要给你介绍如何编写一个圣诞树?

嗯点子不错,不过似乎太简单了?好吧好吧,TJ君肯定不会让小伙伴们失望,拿出一个压箱底的好东东~~~

js2image

这是一个神奇的开源项目,有多神奇呢?它可以把js源代码压缩成一个ascii字符画的源代码的工具,就像这个样子:

不要小看它哦,被压缩后的代码可还是直接可以运行的哦!

安装依赖

# Ubuntu
$ sudo apt-get install graphicsmagick

# Fedora
$ sudo dnf install GraphicsMagick

# OS X
$ brew install graphicsmagick

# Chocolatey (package manager for Windows)
# (Restart of cmd/PowerShell is required)
$ choco install graphicsmagick

不过要注意的是,js2image有一点小局限,就是暂时不支持windows系统(看作者的更新频率可能后面也不会支持了T_T),并且需要图片不能透明、要是白底。

使用

在Node.js中,可按如下命令进行安装:

$ npm install js2image --save

具体的使用方法如下:

var Js2Image = require('js2image');

var image = './resource/tree.png';
var source = './resource/jquery.js';
var target = './target/xmas.js';
var options = {};

// 获取结果的code
var sourceCode = fs.readFileSync(source);
Js2Image.getCode(sourceCode, image, options).then(function (code) {
  // code为生成的代码
  console.log(code);
})

// 或者直接写入文件
Js2Image.writeToFile(source, image, target, options).then(function (code) {
  // 生成的代码已被写入到文件target
  // code为生成的代码
  console.log(code);
});

根据作者的思路,js2image的实现思路有三个步骤:

  • 1、使用现成已有的库来生成图片的字符画。
  • 2、将目标的js代码进行分割,然后将分割的代码分块装入第一步的字符画里。(分割的原理是将js源码解构成一个数组)
  • 3、对于那些不能分开的js语法,特别需要注意要特殊处理,保存在一起。(难点在于如何提取出所有,记住是所有,不可分割的语法)

具体的核心思路,在作者的代码里都实现啦,感兴趣的小伙伴,赶紧来一探究竟!圣诞夜让我们把代码都变成圣诞树吧!获取代码地址如下:
//mp.weixin.qq.com/s/27BMDTf7ybnGj9Z08cPxBw