console 打印图像

在控制台打印图片，炫酷但没太大实用性的小知识。

---

控制台

如果你在百度首页打开过浏览器的开发者工具-控制台，一定能看到百度的招聘信息。还有的网站，用 ASCII 字符拼出 logo 与文字，用于显示版权与版本等信息，这对于当时的我来说，觉得非常新奇有趣。后来知道，这种图形被称为 ASCII art，借助一些工具，可以轻松地创建出来，如ascii art generator、patorjk

见多了，也就让我以为，控制台只能输出文本，不能打印图片，直到今天看到这篇文章。

定义样式

控制台本身支持定义样式，关键点在于 %c，学过 C 语言的都很熟悉，这是个占位符，在这里也起到类似的作用，指令前的文本不会受到影响，指令后的文本将会使用参数中声明的 CSS 样式。下面代码为 example 添加红底白字的样式，可以粘贴到控制台中查看效果：

console.info(
  "This is an %cexample",
  "color: white; background-color: lightcoral;padding: 2px",
);

还可以按顺序指定多个样式，如下有三个 %c，This is 为红色字体，another 维持默认样式，example 为红底白字。

console.info(
  "%cThis is %canother %cexample",
  "color: lightcoral;",
  "",
  "color: white;background-color: lightcoral;padding: 2px",
);

注意：控制台信息的默认行为与行内元素相似。如果要使用 padding、margin，需设置 display: inline-block。

%c 语法可用的属性

不同浏览器的兼容性可能有些不同，大概支持如下属性：

• background 与其全写版本

• border 与其全写版本

• border-radius

• box-decoration-break

• box-shadow

• clear 和 float

• color

• cursor

• display

• font 与其全写版本

• line-height

• margin

• outline 与其全写版本

• padding

• text-transform 这类 text-* 属性

• white-space

• word-spacing 和 word-break

• writing-mode

实际上，一个 background 就能实现大部分效果，因为他可以直接嵌入 base64 图片（在 Chrome 120 中在线图片会加载不出来）。如果是单张图片，需要在 %c 后添加个空格，因为它创建了一个内联元素，这个元素的宽度和高度取决于其内容（也就是我们的CSS样式），可以简单理解为只有样式没有 div 当然就看不到图片。

console.info(
  "%c ",
  "padding-left: 36px; line-height: 20px; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0ibTguNSAxMy41bDUtMTNsLTEzIDVsNiAybDIgNnoiLz48L3N2Zz4='); background-size: 20px; background-repeat: no-repeat;",
);

写在最后

这算是一个奇技淫巧，因为一般开发中基本用不上，在控制台打印图片，属于纯好玩。