怎么在浏览器控制台中打印图片？

JYeontu
1,519 阅读3分钟

说在前面

今天在逛知乎的时候打开了控制台，发现其在初始化的时候会打印一张图片，这是怎么实现的呢？

console API

首先我们可以先上mdn了解一下 console 的具体信息，console的所有实例方法如下：

简单过了一遍console的所有实例方法，好像并没有直接打印图片的方法，那么图片到底是怎么打印出来的呢？

为控制台定义样式

仔细看了一下console的入参介绍，发现了可以使用 %c 为打印内容定义样式：

那么，我们是不是可以利用这个自定义样式来实现打印图片呢？

这里我们看到 %c 语法可用的全部属性，我们可以通过background属性来显示图片，但是背景图片我们需要设置宽高，但这里没有width和height属性，那这要怎么处理呢？继续往下看，我们发现它还有一个padding属性，width和height我们可以用padding属性来替代。

代码实现

创建图片对象

const img = new Image();
img.crossOrigin = "anonymous";

首先通过 const img = new Image(); 创建了一个 Image 类型的对象 img，这相当于在 JavaScript 中实例化了一个 HTML 的 <img> 标签元素，用于后续加载图片资源。

接着设置 img.crossOrigin = "anonymous";，这一步是为了处理可能出现的跨域图片加载情况。由于浏览器遵循同源策略，即默认限制从一个源（包含协议、域名、端口的组合）加载的资源在另一个不同源的页面中使用，当需要加载来自其他域的图片时，通过设置这个属性，浏览器会在发起图片请求时添加 Origin 头信息告知服务器请求的来源，若服务器端相应地配置了允许跨域访问（例如通过设置 Access-Control-Allow-Origin 响应头），则图片能够顺利加载，避免出现跨域错误而导致图片无法正常获取的问题。

图片转为base64

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const { width, height } = img;
canvas.width = width;
canvas.height = height;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, width, height);
ctx.drawImage(img, 0, 0);
const base64 = canvas.toDataURL("image/png");

首先通过 document.createElement("canvas");创建了一个<canvas>元素；接着使用 canvas.getContext("2d") 获取这个canvas元素的上下文对象；获取图片宽高后将图片绘制到canvas上;最后通过 canvas.toDataURL("image/png")将 canvas 上绘制的图片转换为base64;

console.log样式设置

console.log(
  "%c ",
  `
      padding: ${(height * scale) / 2}px ${(width * scale) / 2}px;
      background-image: url(${base64});
      background-repeat: no-repeat;
      background-size: ${width * scale}px ${height * scale}px;
      color: transparent;
    `
);

将前面生成的base64作为背景图片，用padding替代width和height撑开图片容器。

完整代码

console.image = function (url, scale = 1) {
  const img = new Image();
  img.crossOrigin = "anonymous";
  img.onload = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const { width, height } = img;
    canvas.width = width;
    canvas.height = height;
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, width, height);
    ctx.drawImage(img, 0, 0);
    const base64 = canvas.toDataURL("image/png");
    console.log(
      "%c ",
      `
          padding: ${(height * scale) / 2}px ${(width * scale) / 2}px;
          background-image: url(${base64});
          background-repeat: no-repeat;
          background-size: ${width * scale}px ${height * scale}px;
          color: transparent;
        `
    );
  };
  img.src = url;
};

效果测试

console.image("https://pic3.zhimg.com/v2-478e0e44652554c812739fe389d322c3_720w.webp?source=d6434cab");

公众号

关注公众号『前端也能这么有趣』，获取更多有趣内容。

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。

avatar
文章
阅读
粉丝