使用console.log输出特殊字符图案或自定义图片

2023-05-16

最近看到一篇比较有趣的文章

程序员的浪漫–console.log()在浏览器控制台输出特殊字符编码的图案
想自己动手试一试,很明显我做的效果不好,弄了很久还是没弄出来
在这里插入图片描述

下面介绍另外一种方法,方法来自—— 使用console.log打印公司招聘信息和字符画

一、首先需要得到我们想要的字符图案 可以去这个网站生成 http://patorjk.com/

  1. 在白色框内输入想要的字符(ps:有的样式不支持数字、或者不支持同时有数字和字母的字符串,不支持中文字符)
  2. 左侧菜单可以选择字体样式,下方会实时显示结果
  3. 也可以选择test all查看到所有样式结果
    在这里插入图片描述

二、代码编写

主要函数

let string = function () {
      /* 这里放复制的字符图案(记得两边留出一个空格) */
}
 <script>
    function makeMulti (string) {
        let l = new String(string)
        l = l.substring(l.indexOf("/*") + 3, l.lastIndexOf`("*/"))`
        return l
    }
    let string = function () {
      /*       ___           ___           ___     
     /\__\         /\  \         /\__\    
    /:/  /        /::\  \       /::|  |   
   /:/__/        /:/\:\  \     /:|:|  |   
  /::\  \ ___   /::\~\:\  \   /:/|:|  |__ 
 /:/\:\  /\__\ /:/\:\ \:\__\ /:/ |:| /\__\
 \/__\:\/:/  / \/__\:\/:/  / \/__|:|/:/  /
      \::/  /       \::/  /      |:/:/  / 
      /:/  /        /:/  /       |::/  /  
     /:/  /        /:/  /        /:/  /   
     \/__/         \/__/         \/__/    @阿湫·*/
    }
    console.log(makeMulti(string));
    console.log(/* 其他信息 */);
</script>

三、控制台输出结果:
在这里插入图片描述


更新: 自定义图像的输出

我们可以在下面的网站中复制图片链接,生成字符图案
https://www.degraeve.com/img2txt.php
一、生成字符图像:

根据网页内容提示,复制图像链接、选择相应选项并应用在这里插入图片描述
这里我们选择这样画面简单的图像,根据需求调节参数并应用
在这里插入图片描述

二、将生成的字符图案复制到代码块中(同上)

三、实现结果
左侧为生成的字符图案、右侧为控制台输出的图案,但是可以看出图像是有被拉伸的
在这里插入图片描述


一些制作字符图案的网站

  1. 根据文字生成字符画:
    http://patorjk.com/software/taag
    http://www.network-science.de/ascii/
  2. 根据图片生成字符画:
    http://www.degraeve.com/img2txt.php
    http://life.chacuo.net/convertphoto2char
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用console.log输出特殊字符图案或自定义图片 的相关文章

  • C# 有没有办法设置控制台应用程序的滚动位置

    你好 我已经在谷歌上搜索这个问题很长一段时间了 但找不到任何关于我将如何做这件事的结果 我目前有一个选择菜单 用户可以从中选择选项列表 该菜单从顶部开始 但每次刷新列表时窗口都会显示最后一个选项 我想要做的就是能够在窗口中显示带有所选选项的
  • 显示/隐藏 C# 控制台应用程序的控制台窗口

    我在谷歌上搜索了有关如何隐藏自己的控制台窗口的信息 令人惊讶的是 我能找到的唯一解决方案是涉及的 hacky 解决方案FindWindow 找到控制台窗口按其标题 我对 Windows API 进行了更深入的研究 发现有一种更好 更简单的方
  • 用户脚本仅适用于后端提供的页面,但不适用于 SPA 方式的前端

    我在 Greasemonkey Tampermonkey 上运行以下用户脚本 我运行它facebook com它通过 HRO 从后端提供一些网页 在前端提供其他一些网页 就像单页应用程序 SPA 一样 UserScript name fac
  • Pycharm交互式控制台不起作用

    我对 python 和 Pycharm 都很陌生 因此 请毫不犹豫地指出我哪里做错了以及如何解决问题 问题是IPython无法像往常一样导入我想要执行的函数 即使 python 文件运行后 我也无法在 IPython 控制台中导入该文件中的
  • 将数据写入文本文件

    我有一个简单的程序 将 7 个数字中的 6 个写入文本文件 从逻辑上讲 一切似乎都很好 但是 数字并未按预期写入文件 Random random new Random Console WriteLine Please enter the n
  • 如何在.Net Console App中设置默认输入值?

    如何在 net 控制台应用程序中设置默认输入值 这是一些虚构的代码 Console Write Enter weekly cost string input Console ReadLine 135 135 is the default T
  • mysql CLI 工具是否提供了一种以控制台友好的方式显示二进制数据的方法?

    我有一个 MySQL 数据库 其中包含一个带有二进制类型列的表 我希望能够投影该列而不必运行它 例如 HEX 是否mysqlCLI 工具有一个配置选项或其他方式来显示二进制数据的表示形式 而不会输出任意字节供我的控制台以搞笑 烦人的方式解释
  • 如何在Python中打印带下划线的内容?

    print hello 输出应该是单词 hello 但有下划线 您可以通过使用转义字符来做到这一点 print 033 4mhello 033 0m
  • 控制台界面教程和提示 (pdcurses)

    我正在寻找有关使用 PDCurses 库的教程 不幸的是 只有文本文档 这更像是函数参考 pdcurses 是否与 ncurses 足够相似以使用 ncurses 教程 关于制作控制台 UI 的任何提示 附言 PDCurses mingw3
  • 新的 .NET 6 控制台模板中的 C# 函数重载不起作用

    我在尝试重载该函数时遇到错误Print object in the 新的 NET 6 C 控制台应用程序模板 https learn microsoft com en us dotnet core tutorials top level t
  • 与 Write-Host 相比,Write-Output 的使用非常不可靠

    有人指出一个问题 如果我希望命令按顺序操作 建议使用 Write Output 而不是 Write Host 因为 Write Host 不会将输出放在管道上 而其他命令却这样做 这意味着 Write Host 输出可以发生在管道上的其他命
  • 防止应用程序在控制台关闭时退出

    I use AllocConsole 在 winform 应用程序中打开控制台 如何防止应用程序在控制台关闭时退出 EDIT 不时更新的完成百分比是我想在控制台中显示的 void bkpDBFull PercentComplete obje
  • 在 Ruby 控制台应用程序中获取键盘事件(无需按“Enter”输入)的最佳方法是什么?

    我在互联网上寻找这个答案已经有一段时间了 发现其他人也在问同样的事情 即使在这里也是如此 因此 这篇文章将介绍我的案例以及对我找到的 解决方案 的回应 我对 Ruby 很陌生 但出于学习目的 我决定创建一个 gem here https g
  • 使用 WriteConsoleOutput 用 c# 编写 Unicode

    我正在尝试使用WriteConsoleOutput来自 kernel32 dll 的函数 但是我无法正确显示 unicode 字符 它们总是显示为错误的字符 我尝试过使用 Console OutputEncoding System Text
  • 在 Linux 控制台中返回一行?

    我知道我可以返回该行并用以下内容覆盖其内容 r 现在我怎样才能进入上一行来改变它呢 或者有没有办法打印到控制台窗口中的特定光标位置 我的目标是使用 PHP 创建一些自刷新的多行控制台应用程序 Use ANSI 转义码 http en wik
  • 如何将数据记录到Flutter控制台?

    我是一名初学者 正在使用 IntelliJ IDEA 我想将数据记录到控制台 I tried print and printDebug 但我的数据没有显示在 Flutter 控制台中 如果你在 Flutter 中Widget 您可以使用de
  • 如何确定 Console.Out 是否已重定向到文件?

    如果我的程序正在打印到控制台 我会根据 Console WindowWidth 通过插入换行符以某种方式执行自动换行 这非常有效 但是 如果程序的输出被重定向到文件或另一个程序 我希望它跳过自动换行 当出现这种情况时我该如何检测 Conso
  • 如何将文本保留在控制台顶部?

    我试图让我的控制台应用程序自动滚动 但将文本保留在顶部 文本历史记录必须可访问 以便Console Clear不可行 是否有任何方法可以检测控制台何时滚动或有任何方法可以调整当前的 Y 位置 因为我知道当您的文本即将离开屏幕时控制台会滚动
  • 在加特林控制台上打印相关值

    我们如何打印使用捕获的值saveAs myValue 在控制台上gatling 就像我们一样System out println 在Java中 使用 saveAs 保存的值将保存到 session 中 文件 http galing io d
  • 如何使用 jasmine.js 测试控制台输出?

    我正在研究文本 面向 Web 开发人员的专业 JavaScript 作者 Nicholas Zakas我正在使用 Jasmine js 测试这些示例 目前 我可以通过指定返回值来测试函数的输出 但是当我想要返回多条数据时 我会遇到麻烦 教科

随机推荐

  • spring容器对Bean组件的管理

    spring容器对Bean组件的管理 1 Bean对象创建时机 默认是随着容器创建 xff0c 可以使用lazy init 61 true xff08 在调用getBean创建 xff09 延迟创建 xff0c 也可以使用 lt beans
  • nginx平滑升级(添加echo功能)配置和状态监控

    添加echo模块 配置 1 先去github或者gitee中找到nginx module echo master zip包 2 将原来的ngin 1 20 1删除 重新编译安装 span class token punctuation sp
  • 字节对齐的原理和方法

    Pragma是什么 小发猫的博客 CSDN博客 pragma是什么 Pragma是什么 Pragma是什么 翻译 SkyJacker后附英文原文 译者注 一句话 xff0c pragma就是为了让编译器编译出的C或C 43 43 程序与机器
  • 【Android】Banner2.1的使用

    com youth banner Banner 2 1的使用 与前版本不同的是 xff0c 2 1版本是用的适配器 设置适配器和点击事件 banner span class token punctuation span span class
  • linux系统中安装Java环境

    Ubuntu安装Java环境 步骤1 xff1a 下载jdk 我选择的jdk版本文件 xff1a jdk 8u131 linux x64 tar gz 步骤2 xff1a 创建单独的目录 sudo mkdir usr local java
  • SpringMVC --01.2023Idea搭建全注解式开发的SpringMVC

    1 创建项目 打开Idea xff0c 并点击新建项目 注 xff1a 使用的是2022 2的商业版 xff0c 该版本跟2021 2的商业版创建Maven项目不一样 点击右侧的新建项目 gt 取名 gt 创建 这样我们就创建了一个空依赖的
  • Java中的异常及异常处理

    目录 1 什么是异常 2 为什么要处理异常 3 异常分类 4 如何进行异常处理 4 1 捕获异常 4 2 手动抛出异常 4 3 自定义异常 4 4 debug调试模式 5 其他异常 1 什么是异常 程序中 在代码编译或运行过程中 xff0c
  • Spring之配置文件

    目录 什么是配置文件 配置文件作用 配置文件的格式 properties 配置文件说明 properties 基本语法 三种读取properties的方法 yml 配置文件 yml 基本语法 总结 什么是配置文件 首先我们知道我们的程序是
  • 已解决:前、后端打包部署至服务器后,背景图片不显示并且一些图标都变成了方块

    将打包好的jar包部署至服务器后 xff0c 输入项目网址后 xff0c 发现背景图片没有显示出来并且一些图标变成了方块 解决办法 xff1a 在前端找到bulid文件目录下的utils js文件 xff0c 添加以下语句 xff1a pu
  • 分布式 Redis & RabbitMQ 终极秒杀

    本篇文章记录的为RabbitMQ知识中企业级项目中秒杀相关内容 xff0c 适合在学Java的小白 帮助新手快速上手 也适合复习中 xff0c 面试中的大佬 x1f649 x1f649 x1f649 如果文章有什么需要改进的地方还请大佬不吝
  • Ubuntu字符界面输入密码始终提示错误 login incorrect 解决办法

    首先要明确自己的用户名 xff0c 可以在设置中看到 其次是密码 xff1a 如果密码有数字 xff0c 只能使用字母上面的数字输入 xff0c 数字键盘无法识别 xff0c 会导致login incorrect
  • Unix环境高级编程代码(实时更新)

    实例1 3 列出一个目录中所有文件 xff08 ls c xff09 include 34 apue h 34 include lt dirent h gt int main int argc char argv DIR dp struct
  • nginx-rewrite和if使用

    rewrite 常见的flag flag作用last基本上都用这个flag xff0c 表示当前的匹配结束 xff0c 继续下一个匹配 xff0c 最多匹配10个到20个 一旦此rewrite规则重写完成后 xff0c 就不再被后面其它的r
  • ZYNQ7020 FPGA 如何生成从Flash和SD卡启动的镜像文件

    ZYNQ7020 FPGA 生成从Flash和SD卡启动的镜像文件 xff08 BOOT bin xff09 创建BOOT bin 工具vivado 2017 4 1 创建工程 包括创建工程 xff0c 编写程序 xff0c 添加约束 2
  • 解析Android自带的SettingActivity——>Proference

    1 在res xml中 的代码解析 Preference是采用SharedPreference保存数据的 这里的属性key表示默认存储的键 xff0c defaultValue表示默认存储的值 如果是使用preference的话 xff0c
  • Android中使用lottie资源

    lottie资源的使用 1 下载lottie文件的网址 xff1a https lottiefiles com xff0c 下载的文件为 json的文件 2 存放在Android的位置为 3 在应用级别的 build gradle 文件中添
  • 【实验七】Linux生产者消费者问题(线程)

    目录 一 问题介绍 二 代码 1 prod cons cpp 2 producer h 3 producer cpp 4 consumer h 5 consumer cpp 6 mq h 7 mq cpp 8 message h 9 mes
  • HTTP-响应数据格式及常见地状态响应码(403,404,405)

    HTTP 响应数据格式 响应数据分为3部分 1 响应行 响应数据的第一行 其中HTTP 1 1表示协议版本 xff0c 200表示响应状态码 xff0c OK表示状态码描述 2 响应头 第二行开始 xff0c 格式为键值对的形式 3 响应体
  • 【Linux】TigerVNC安装指导

    1 以单一用户远程访问桌面 1 1 服务端中启用桌面共享 在统信服务器操作系统V20 1020a 上配置为启用单一客户端的远程桌面连接 1 2 配置远程桌面服务端 1 配置防火墙规则来启用对服务端的VNC访问或关闭防火墙 xff1a fir
  • 使用console.log输出特殊字符图案或自定义图片

    最近看到一篇比较有趣的文章 程序员的浪漫 console log 在浏览器控制台输出特殊字符编码的图案 想自己动手试一试 xff0c 很明显我做的效果不好 xff0c 弄了很久还是没弄出来 下面介绍另外一种方法 xff0c 方法来自 使用c