程序员的浪漫--console.log()在浏览器控制台输出特殊字符编码的图案

ゞ浴缸里的玫瑰 2022-05-24 10:34 376阅读 0赞

**前言：**520刚刚过去，不知道大家都做了什么浪漫的事情。下面介绍一种程序员的表白方式![大笑][laugh.gif]

最近在查看某些网站的，发现在浏览器的控制台会打印处理一些特殊的图案，比如知乎。那我们何不把这个换成我们喜欢人的照片。

![70][]

在百度之后，发现打印这个是使用了console.log() 打印的，我查找了一下知乎网的这个console.log() 代码。

在[https://static.zhihu.com/heifetz/main.app.93166c58a11467dddbfd.js][https_static.zhihu.com_heifetz_main.app.93166c58a11467dddbfd.js] 这个js中。

console.log("\n          _____                    _____                    _____                    _____          \n         /\\    \\                  /\\    \\                  /\\    \\                  /\\    \\         \n        /::\\____\\                /::\\    \\                /::\\    \\                /::\\    \\        \n       /:::/    /                \\:::\\    \\              /::::\\    \\              /::::\\    \\       \n      /:::/    /                  \\:::\\    \\            /::::::\\    \\            /::::::\\    \\      \n     /:::/    /                    \\:::\\    \\          /:::/\\:::\\    \\          /:::/\\:::\\    \\     \n    /:::/____/                      \\:::\\    \\        /:::/__\\:::\\    \\        /:::/__\\:::\\    \\    \n   /::::\\    \\                      /::::\\    \\      /::::\\   \\:::\\    \\      /::::\\   \\:::\\    \\   \n  /::::::\\    \\   _____    ____    /::::::\\    \\    /::::::\\   \\:::\\    \\    /::::::\\   \\:::\\    \\  \n /:::/\\:::\\    \\ /\\    \\  /\\   \\  /:::/\\:::\\    \\  /:::/\\:::\\   \\:::\\____\\  /:::/\\:::\\   \\:::\\    \\ \n/:::/  \\:::\\    /::\\____\\/::\\   \\/:::/  \\:::\\____\\/:::/  \\:::\\   \\:::|    |/:::/__\\:::\\   \\:::\\____\\\n\\::/    \\:::\\  /:::/    /\\:::\\  /:::/    \\::/    /\\::/   |::::\\  /:::|____|\\:::\\   \\:::\\   \\::/    /\n \\/____/ \\:::\\/:::/    /  \\:::\\/:::/    / \\/____/  \\/____|:::::\\/:::/    /  \\:::\\   \\:::\\   \\/____/ \n          \\::::::/    /    \\::::::/    /                 |:::::::::/    /    \\:::\\   \\:::\\    \\     \n           \\::::/    /      \\::::/____/                  |::|\\::::/    /      \\:::\\   \\:::\\____\\    \n           /:::/    /        \\:::\\    \\                  |::| \\::/____/        \\:::\\   \\::/    /    \n          /:::/    /          \\:::\\    \\                 |::|  ~|               \\:::\\   \\/____/     \n         /:::/    /            \\:::\\    \\                |::|   |                \\:::\\    \\         \n        /:::/    /              \\:::\\____\\               \\::|   |                 \\:::\\____\\        \n        \\::/    /                \\::/    /                \\:|   |                  \\::/    /        \n         \\/____/                  \\/____/                  \\|___|                   \\/____/         \n\n知乎(zhihu.com)，招聘前端开发工程师 http://zhi.hu/BDXoD\n    ")

# 1、开始制作我们自己的字符图案 #

参考网址：[https://www.zhihu.com/question/26813467][https_www.zhihu.com_question_26813467]

[https://aotu.io/notes/2016/06/22/An-interesting-experience-on-console/][https_aotu.io_notes_2016_06_22_An-interesting-experience-on-console]

[ https://www.cnblogs.com/Wayou/p/chrome\_dev\_tool\_style\_console.html][https_www.cnblogs.com_Wayou_p_chrome_dev_tool_style_console.html]

制作思路：找到一个我们喜欢图案，变成这样的字符形式，然后字符形式的图案的换行（\\r\\n）都去掉，换成 \\n，这样就能正确的在console.log()中正确打印。

## （1）将图案变成字符形式 ##

进入这个网站：[http://picascii.com/][http_picascii.com] 该网站支持将图片生成 字符图案。（当然也可以使用别的工具）

选择一张图片，可以设置大小和是否显示颜色。这个需要大家自己调调，找找合适的照片和大小。

![70 1][]

这个是我的：

![70 2][]

我们将 TEXT 中的内容复制出来。

## （2）对生成的字符图案进行处理 ##

工具：Notepad++

主要使用notepad++将生成text中的换行都置换。

参考网址：[https://jingyan.baidu.com/article/922554464a2a26851648f408.html][https_jingyan.baidu.com_article_922554464a2a26851648f408.html]

先设置一下：

![70 3][]

效果：就将换行符显示出来了

![70 4][]

将\\r\\n 都替换成为 \\n 需要两步：

打开替换界面（快捷方式：ctrl+H）

![70 5][]

由于不能直接替换成\\n，我们先替换成a，等会再替换\\n.

![70 6][]

你会发现整个text变成了一行，再次替换：

![70 7][]

完成。

## （3）设置到console.log() 中，看是否成功。 ##

新建html

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
    	<script type="text/javascript">
    		console.log(" ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,..` ```.```,,,,,.....``.```.``` ..`  ` ``  ` `````` \n +'+###############@@##############+###+##+'#+++'+':``.;++,.`;'+#,+'#;:.;;,``:.`,`.:.``,..``````````` \n #+++#############@@@#########+#+####@#####'+'+'++';```'+;:'`.#;';.,':,.';`.`.:.`.`.```,,.``````````` \n ################@###########++########+###+####+'+;,`.'`,,``.`;'.:.`+;.:;.,,,.```.:.``.````````````` \n ###############@#############+#########+#####+#+'+'.,:'.,..``...,'.`';,;;`,.,``````.``.,```````````` \n ############@@###############+#########+####++##+++,.,,:`,,`;,,..',.:';;:```````.``.``.,`````.`````` \n #############@##########################+###++++''+;.`,,:`,``:':,+...;.``````.``.`.`````..`````````` \n ######################################+##+###';#++'';,,,;.``.`::.:;:::.`````.````,,````````````````` \n #####################################++##++##+'#+'+'+:``,.``.`''`,':`,```.```.``.``.````.``.````.``` \n #######################################+##+###''+++++'.``.:```+;.`::`,.``,`````````,````````.``````` \n ######################################+####+##+''##+';:```.`.:;.`..:,,,.`````,`,:.````.``.``..`````` \n ########################################+#++##+''##+';;,`````;:.`..;.:,.```````,..`.,,....`.....```` \n #######################################++#####+:''#++;':`````.``;,,';;;,..,````..,,`,,,.`:````.````. \n ########@###############################+##+##+;';###';:,`````.;:;:''';,`.,,...,,..,.,..``,`.`...``. \n ########################################+#+####+';++++;;',```.,.;,:++;;';,..`,,..,,,,.,.`...`...`.`. \n ##########################################+####++;;#'';;',``.`.:;;,+:;;:,,:,..,..,...,,.,..`........ \n ##########################@@##############+####++''#+';:;,.`..:,#,:',.;;::,:.....,.,,............... \n ##########################################+###+#'''+#+';':,...`.':,::::::,:,,.,.,,,,..............,. \n #########################@###################+##++'+++'+'::,:.,.':,.,,,;:,;,,..,.,,.,.`........,,... \n +#########################@######################+;#'++;;;;::,,,::::,.:,,:::.,...,.,..`.``....,.,,., \n +#######################@#########################++'';;'+'+;;:::::,.,,,;;:;,,.,,,`...``.....,..,,,, \n ################@#######@########################+#+'+;+#++#''+';::...:;;;,,.,...,..,.````..`...,,,, \n #######################################+######+####+'+;+####+++'';;:,,,'::,.,........``.......,,,,,, \n ###############################++#####+;;;+#########'''+#######+++;;:,;,':,..,..``.`.```.`.`..,,,,,. \n ########++'++###+++#########+++++#####+';;'+++###+++#''##########+';::,,;,,.,..`````````..`....,,,,, \n #######';';;;'''''++++##++#'''''++#####+'';::++###'+#''############;::,,,,,....`.`.````````.`..,,.`. \n #######;;;;;;;;;;;''+++++'';;;''++#++++#+':::;;####+#''############+:::,.,,..`````````````...```,,.. \n ######+::;;;;;;;;;;'+'''';;;;;;''''''''''';::,:+###+''######+'+#####;:,,,,:,.``````````````.``.,,,,, \n ######;::::;;;+###+''''';;;;;;;'''';:::::;:::,,:###+';#++';;:::;+####:::,,,,,.```````````.....,,,,,, \n ######:::::'+##+'####+'';;::;;;''';:::,,,,::,,,,+##+';#+;::,,,,:;+###+:::,,:.````````````.....,,,,,, \n ######:::::;;:;;:+####';;::::;;''';::,,,,,,:,,,,;##+''+'':::,,,:;;'##+;;::,.````````````......,,,,,, \n ######:::,,:::::::'++#;;::,,::;'';;##@#',,:::,,,:##'+'+';;::::,::;;;#+';;;,..``````````......,,,,::: \n ######:,,,,,::::::;'';;::,,,,:;';+####+'+#,:,,,,:##++++'';;::::::::;+#++';,,.`.```````........,,,,,, \n ######:,,,,,,::::;;;:::::,,,,,:;;#'###:'+++;,,,,;##++#++';;::,,,::::;#++'':...```````````..`....,,,. \n ######:,,,,,,,,:::::,,:,,,,,,,:;;;;;;;:,,,,,,,,,'+++##+'';;;::,,,,,:;+++'+;,...```````.......,,,,,,, \n ######;,,,,,,,,,,,,,,,,,,,,,,,,::;;;;::,,,,.,,.,+#++##+'';;::::,;;:::'++++;.....`````...`..``.,.,,,, \n +#++++:,,,,,,,,,,,,,,,,,,,,,,,,,,::::::,,,.....,+++##+++';;;:;'+'';;:;+++';,...`````.`.``````````.,, \n ##+###;:,,,,,,,,,,,,,,,,,,,.,,,,,,,:::,,,.....,,++#####+'';;;;':::,,,:;++'',....```````````````````. \n ######;:,,,,,,,,,,,,:,,,,,,.,,,,,,,,,,,,,.....,,+######+';;;;;;::,,,,::'++;..````````````.``````.``` \n ######;:,,,,,,,,,::::,,,,,,..,,,,,,,,,,,,,,,,,,;#+###++++';;;;;;###+:,,:++;,.``````````.....`````.`` \n ######;:,,,,,,,,,:::::,,,,,..,,,,,,,,,,,,,,,,,,+####+++++';:;;;+##;:,,..:;:.```````````,,,,...`````` \n ######'::,,,,,::::;::,,,,,,..,,,:,,,,,,,,,,,,,,#######+++';,,;:;::,,,....':.``````````,,,,,``.``.``` \n ######'::::::::::;;;,,,,,,,,...,::,,,,,,,,,,,,,########++':,,,:::::,,,...;:.```````.`.,:,,.....````` \n ######':::::::::;;;:,,,,,:,,,...:::,,,,,,,,,,,,####+++++++;,,,,::::,,,...:;.`````````,,,,.```..`..`` \n ######+:::::::;;;;:::::::::;:,,,;:::,,,,,,,,,,;######++++';,,,,,,,,,,,,,.:',.....````..,..``.`.```.. \n ######+::::::;;;;::,:'+#''''+;::':::::::,,,,,,###++''''+++':,.,:::,,,,,..:'....`...``.......,,..``.. \n ######+::::::;:::::,:'++++++++;:;::::::::,,,,,###++'''''++;:,..:::,,,,,,.;;,,,,:,,,,.,,,,.......``.. \n #######;:::;;;::::::::;;'+++++':::::::::::,,,,###++''''++';:,,,.:::,,,,,,:',,,,,,,,..,,,,,:,,,.,,,,. \n ######++::;;;;:;;:::::::;''''::::::::;;;::,,,@####++'''++'';;:#;::::,,,,,':,,,.......,,,,,,,,..,,,,, \n ####+##+:::;::;';;:::,,:::::::::::::;;;;::,,,######+'''+####++;,,,,:::,,.'+;,.........,,..,...,,,,,, \n #+';::'+::::::;'##+;;;:,::::,,::;;;:;';;;::,########+'''''''::,,,,::,,,,,+';:........,,,,,.,........ \n ,,,,::,,,:::::;';;;;;+;;:;;;';:;'''';';;;:,,#@#######++++'';::,:,::;:,,,,##;;:``.,...,,,,,,,,....... \n ,,,,:,,,,,:;;;;;;::::,,;++++++#+##+';;';;:,@@@#########++++++'+++#'::,,,.##'',`````..,,,,,,,........ \n ,::,:,,,,,,;;;;;;::::::::,:,,,:;'+'';;;;;:@##@##@######++++';;:::,,,:,,,'##+;,..```````,,,,,.,...... \n ,,:,:,,,,,,:;;;;;:::;;;;::::;;;;;''';;;;:@##@@#:,,::+###'''';';:,:,,:::,###+',```.```````.,.,..`...` \n ,::,:,,,,,,:;;;;:;:::;''''++';;;;;''';;+#@@#@#+:,,,,::;#+''''''';:::'':+####'.``....```````...`````` \n ,:,:,:,,,,:::;;;:::::;;'++++';;;;;'';;'+#@#@@#'',,,,,::##''''';;;+####:######+',......`````````````` \n ::,:,:,,,,,:::;;;:::::;;'''';;;;;;';;;;####@#'''':,,,,,+#+''';::##############++#+####+'.````...`... \n ,,,,::,,,,,:::;;;;::::;;;;;;:;::;;;;,:;+####++''';,,,,,:+#''';;###++###########+#########+:```.....` \n ,:::,,:,,,,::::;;;;:;;;;;;';;:;;;;::,:;'#+####+++;:,,,,,;++';;####+#+'#+###################'```...., \n ,,,,:::,,,,:::::;'';;;'''''';;;;;:,:,::'+++##+'''':,,,.,:,##+###+++##+'#####################;``...,. \n ,,,::::,,,::::::;'''''''''''';;;:,,,,::+;++###+'''';,,.,:,,#####++####++';##################+.``:::: \n ,,,,,:::,,,::::::;''''''''''';;::,,,,:,':++####+#+++;,,,::;#######+####++'+#################+,``,,:, \n ,,,,:,::,,::::::::;'''''';;';;::,,,,,,,':++++##+';;;;:,,;@#######+######+++##################;```,,, \n ,,,,,::::,,:::::::;;'''''''';;:::,:,,,,',++++++#+'''''++#################+'@################++```,,, \n ,,,,:::::,,:::::::;;;'''''';;:::,,,,,::;,:''''+'#####@####################+#################++.``.,, \n :,,,:,::::,:::::::::;;'''';;;:::,,,,,,:;:,:;;;;;'''';####+#################+#################++.`.,, \n :,,,,::::::::::::::;;;;''';;;:::,:,,,,:;:,,::::::;;::;+'';#################+##################+'``., \n ;:,,,,:,:::::::::::;;;;;''';;:::,,,,,,:;:.,,,:::,:::::;;':+#################+##################+..`, \n ':,,,,;::::,::::::;;;;;;';;;;::,;,,,:,:;:,,,,,,,,,:::;;;;:+######@+###########@#################.``, \n ;::,,,:::::::::::::;:;;;;;;;::,,,,,,,,:;:,.,,,,,,:,:::;;;:+#####;..##########+@#################```, \n :;:,,,,;::::::::::::::;;;;;;::,;,,,,:,,;::.,,,,,,,,,:::::;#'##@..,,.##########+######@##########.``. \n :;:,,,,':::::,:::::::::::;:::,,,,,,::,,:::,,,,,,,,,,,:,:,':;#;,,,,...#########+#################.``` \n :::,,,,::,:,:,,:::::::::::::,,:,,,,;,,,:::,.,,,,,,,,,:,:,;:::,,,,,,..'#########+####@###########..`` \n ::;:,,,:;:,:,:,,,,:::::::::,,,,,,,,:,,,,::,.,,,,,,,,,:,:,::::;,,,,,...##########################.``` \n                                                                                                      \n");
    	</script>
        <body>
        </body>
    </html>

在浏览器打开，查看浏览器控制台：

![70 8][]

大功告成。

## （4）后话 ##

console.log() 还能打印有颜色的字符和图片，大家可以试试。 可以试试打印一个彩色的字符图案会更加好看。由于这里我没有尝试，就先到这里。等我尝试后，会再发出来一篇文章。

![20180525154213512][]

[laugh.gif]: https://static-blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif
[70]: /images/20220524/91d9d8245e7d4d7c9dab7845137f6e0e.png
[https_static.zhihu.com_heifetz_main.app.93166c58a11467dddbfd.js]: https://static.zhihu.com/heifetz/main.app.93166c58a11467dddbfd.js
[https_www.zhihu.com_question_26813467]: https://www.zhihu.com/question/26813467
[https_aotu.io_notes_2016_06_22_An-interesting-experience-on-console]: https://aotu.io/notes/2016/06/22/An-interesting-experience-on-console/
[https_www.cnblogs.com_Wayou_p_chrome_dev_tool_style_console.html]: https://www.cnblogs.com/Wayou/p/chrome_dev_tool_style_console.html
[http_picascii.com]: http://picascii.com/
[70 1]: /images/20220524/65b295d654d64107b88b1222ae0c388f.png
[70 2]: /images/20220524/7e4e9c7f187c4800aa5fd485dd3e1a84.png
[https_jingyan.baidu.com_article_922554464a2a26851648f408.html]: https://jingyan.baidu.com/article/922554464a2a26851648f408.html
[70 3]: /images/20220524/d4051957c29a4295af41b618019784bb.png
[70 4]: /images/20220524/d4ee436606cd4acdabc04e0a7d6ae0d1.png
[70 5]: /images/20220524/b0af8c1a4a4c4e7585abf2c8b9d2da35.png
[70 6]: /images/20220524/618d5818c8994cca9639173c8780c61c.png
[70 7]: /images/20220524/d393c990e8784085af4cb1e756cff955.png
[70 8]: /images/20220524/91d40cc89dd947028b8ffac395bc9f1b.png
[20180525154213512]: /images/20220524/2174e33a4f114c23a159ef360c10fd22.png