console log可带劲啦(特殊字符编码图案)

2,009 阅读1分钟

之前已经讲过关于如何调戏console.log()的问题了,但是我们想要看起来更“厉害”的。 本篇操作在第二节,不推荐跳过余下内容。

一、 看起来更加"厉害"的console.log

天猫.png

途牛.png

知乎.png

看起来就是比单纯的打上汉字厉害一点的样子,当然也可能是程序猿特殊的中二原因。毕竟这类彩蛋只有打开控制台才能看到不是。 这东西,叫FIGlet

二、 做起来很“厉害”的console.log

将图片和文字转成特殊字符串,来源已久,久到1991年就有类似工具了,实现大概170行。 当然,现在我们只需要简单的操作一下工具就好。

  1. 使用在线工具 picasciiimg2txt
  2. 上传一张图片(不建议过大),点击“生成”
  3. 查看生成好的text或HTML代码(HTML可以是彩色哦);
  4. 复制出对应的TEXT,利用编辑器在每行最末尾添加\n,之后讲换行清楚,即变成一行字符串
  5. 扔入console.log()中
  6. 因为是字符串,可以配合%c使用。

上效果图:

console效果.png

HTML利用<pre>.png

三、对于非图片的字符串生成

先上工具: patorjk

生成text.png

console效果.png

四、 其他的工具

  • VS编辑器 VSC Figlet插件

  • Node.js figlet

npm install figlet
var figlet = require('figlet');
figlet('Hello World', function(err, data) {
	if (err) {
		console.log('Something went wrong...');
		console.dir(err);
		return;
	}
	console.log(data)
});

执行node,控制台就会显示出来

PS:IE6/7不支持console且抛出错误

以上 希望大家玩出更厉害的figlet

引用: segmentfault.com/a/119000001…