控制台打印图片

已于 2023-12-01 11:35:03 修改
阅读量165 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2023-12-01 11:20:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L2395183536/article/details/134730429
版权

不小心按到了 F12 ，看到了这么一个东西
在这里插入图片描述

尝试写了一下
代码
console.log("%c ",font-size:100px;background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBpZD0i5YiX6KGo6aG1IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBpZD0iZmlsZS1kb2MtMTYtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgZmlsbC1ydWxlPSJub256ZXJvIj48cGF0aCBkPSJNMTEuMzAzLjk4NEgyLjMzYS4yNTQuMjU0IDAgMCAwLS4yNTEuMjA4TC4wMDQgMTIuODAyYS4yNTMuMjUzIDAgMCAwIC4yNTEuMjk2aDQuOTQ2bC4zOTItLjEySDcuODlsLjMyLjEyaDMuODFjLjEyNCAwIC4yMy0uMDg4LjI1Mi0uMjA4bDEuNzA3LTkuNTVMMTEuMzAzLjk4NFoiIGlkPSLot6/lvoQiIGZpbGw9IiMyQTY1RjUiLz48cGF0aCBkPSJtMTEuMzAzLjk4NCAyLjY3NiAyLjM1NmgtMi43OTNhLjI1Mi4yNTIgMCAwIDEtLjI1MS0uMjk1bC4zNjgtMi4wNjFaIiBpZD0i6Lev5b6EIiBmaWxsPSIjMDBEQ0ZGIi8+PGcgaWQ9InByZWZpeF9fYS1saW5rIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIC45ODQpIiBmaWxsPSIjRkZGIj48cG9seWdvbiBpZD0icHJlZml4X19hIiBwb2ludHM9IjYuMjggMC40OTcgMTIuMDU4IDUuNTg3IDExLjkzNSA1LjU5IDguMzggNS41OSA3LjIxIDEyLjExNCA0LjIgMTIuMTE0IDUuMzcgNS41OSAzLjAxIDUuNTkgMC44ODMgMy4zMjEgNS43NzggMy4zMTMiLz48L2c+PC9nPjwvZz48L3N2Zz4=);background-size:contain;background-repeat:no-repeat;)

%c 后面两个空格，CSS 是给这两个空格写的样式，100px 决定这个背景图的大小，腾讯文档的应该是 40px ，这个值改得越大，这个图越大

文章来自V2EX用户kaiki，多谢大佬

屿东
关注
java控制台打印图片_java——控制台输入打印图形
weixin_35674932的博客
02-27 2246
1. 打印直角三角形需求说明：从控制台输入直角三角形的高度(行数)。每行*的数目依次为1、3、5、7等。实现思路：外层循环控制行数，根据用户输入的行数得到外层循环条件分析每行打印的内容：每一行均打印*号，第i行的*号数为2*i-1，从而得到内层循环条件代码如下：代码如下：import java.util.Scanner;publi cclass Three {public static void ...
Python控制台打印彩色字符图
代码艺人
10-18 1107
网上搜到的都不是很完美，所以自己借鉴了部分文章实现了一下，效果如下： （ps:代码能用，但还是达不到理想状态，我已经把缺点写在里面了，追求完美的同志可以自己改改，改完记得在下面评论里面附上自己博客连接哦，便于后来的朋友找到你的代码） 最终效果 代码实现 from PIL import Image import cv2 def img_RGBcolor_ascii(img, imt, r=3): # img: input img img here is 3channel! # r: ra
使用 JS 实现在浏览器控制台打印图片 console.image()
henry47的博客
05-17 891
在前端开发过程中，调试的时候，我门会使用 console.log 等方式查看数据。但对于图片来说，仅靠展示的数据与结构，是无法想象出图片最终呈现的样子的。虽然我们可以把图片数据通过 img 标签展示到页面上，或将图片下载下来进行预览。但这样的调试过程实在是复杂，何不实现一个 console.image() 呢？
css3 svg 背景图 data:image/svg+xml;base64
热门推荐
liujing319的专栏
04-17 4万+
css3 svg 背景图 data:image/svg+xml;base64 background: #fff url(data:image/svg+xml;base64
微信小程序——flex布局
wct040923的博客
03-21 4766
在一款校园类软件新引进日课表功能，其中的单个盒子就可使用flex布局具体的盒子分布方式可如上划分（其中建筑的方格可最后考虑，因为此图片位于文字的下方，需要用其他定位方式来进行定位，层级调低一个即可）首先需要确定最外层的大格子为父容器，给予flex布局的标志（display:flex）。在框里面的方格时要找准下一个较低的父容器的盒子的划分（在较低的父容器其中也要加入display:flex）。
程序员的浪漫--console.log()在浏览器控制台输出特殊字符编码的图案
qq1164014750
05-25 3万+
前言：520刚刚过去，不知道大家都做了什么浪漫的事情。下面介绍一种程序员的表白方式最近在查看某些网站的，发现在浏览器的控制台会打印处理一些特殊的图案，比如知乎。那我们何不把这个换成我们喜欢人的照片。在百度之后，发现打印这个是使用了console.log() 打印的，我查找了一下知乎网的这个console.log() 代码。在https://static.zhihu.com/heifetz/main...
python控制台图片_用python 控制台打印图片示例
weixin_39827304的博客
11-20 936
功能：利用 python 的 image模块和简单用符号，再控制台打印出图片的图片轮廓PIL 安装pip install Pillow步骤：1、拿到图片对象，并转换图片模式（‘’L‘’）,L模式可以去到图片的个像素的灰度参数；2、定义图片缩放长度、替换字符的串（根据灰度值排序）；3、遍历缩放后每一个点位置，并获取该点位置的灰度值，根据灰度值替换为相应的替换字符；4、打印在控制台；代码如下：#-*...
用python 控制台打印图片示例
土豆的博客
04-14 1万+
功能：利用 python 的 image模块和简单用符号，再控制台打印出图片的图片轮廓    PIL 安装 pip install Pillow 步骤： 1、拿到图片对象，并转换图片模式（‘’L‘’）,L模式可以去到图片的个像素的灰度参数； 2、定义图片缩放长度、替换字符的串（根据灰度值排序）； 3、遍历缩放后每一个点位置，并获取该点位置的灰度值，根据灰度值替换为相应的替换字符； 4、
C++实现图片在控制台中输出
05-10
6. **逐像素渲染**：读取每个像素后，根据其颜色值选择相应的字符，并在控制台的相应位置打印出来。对于彩色图片，可以使用不同的颜色组合来增强视觉效果。 7. **效率优化**：考虑到控制台输出可能会很慢，可以考虑...
c语言控制台输出爱心图,C语言控制台打印3D爱心图案
weixin_33132819的博客
05-18 2549
很多程序员都觉得自己的编程工作十分的鼓噪乏味，一整天面对的都是一些写不完的代码和改不完的Bug。今天我们要给大家分享一些有趣的C语言代码，或许可以为你无聊的工作带来一丝乐趣。这些代码可以完成几个不同的爱心图案，其中有一个例子甚至可以在黑色背景的控制台上打印出跳动的3D爱心动画，效果相当震撼。我用的是Visual Studio 2015开发环境，如果你也使用这个开发环境，可以直接拷贝下面的代码进行效...
java控制台打印各种图形
JINGhl512的博客
12-11 6068
package hello; public class Demo { public static void main(String[] args) { // 打印方 for (int i = 0; i < 5; i++) { for (int j = 0; j < 5; j++) { System.out.print("*"); } Syste...
在浏览器控制台输出图片
weixin_30426065的博客
08-28 538
今天无意中在百度知道页面打开了控制台，看到了控制台里居然有百度的logo 研究发现方法如下 if(!console){ console = {} console.log = function(){} } function setConsoleImage(url){ var img = new Image(); img.style.d...
JavaScript 生成二维码
qq_30049249的博客
11-02 229
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 470
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 134
vxe-grid新增空行，并且定位到空行位置。
Vue2+3
m0_73557953的博客
11-04 84
创建Vue实例 Vue指令
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
最新发布
cx18333的博客
11-05 470
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
c#控制台打印胜利图片
10-30
在 C# 控制台上创建胜利图片通常意味着你需要使用 ASCII 艺术或者特殊的字符组合来表示图案。这里是一个简单的例子，你可以打印一个简单的 "V" 字形代表胜利： ```csharp using System; class Program { static ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值