JS 实现浏览器控制台打印图片 console.image() ，HTML/Vue代码在线实时编辑、预览

<main> <p>按 F12 打开控制台</p> <p>即可查看 console.image() 函数的运行效果</p> <p>目前在 chrome 中有效</p> </main>

body { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: #eef; }

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

            
            // 实现 console.image 函数【注意，url如果是网络图片必须开启了跨域访问才能打印】
console.image = function (url, scale) {
  const img = new Image()
  img.crossOrigin = "anonymous"
  img.onload = () => {
    const c = document.createElement('canvas')
    const ctx = c.getContext('2d')
    if (ctx) {
      c.width = img.width
      c.height = img.height
      ctx.fillStyle = "red";
      ctx.fillRect(0, 0, c.width, c.height);
      ctx.drawImage(img, 0, 0)
      const dataUri = c.toDataURL('image/png')

      console.log(`%c sup?` ,
        `
          font-size: 1px;
          padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
          background-image: url(${dataUri});
          background-repeat: no-repeat;
          background-size: ${img.width * scale}px ${img.height * scale}px;
          color: transparent;
        `
      )
    }
  }
  img.src = url
}

// 使用案例

// 支持 图片地址【注意，url如果是网络图片必须开启了跨域访问才能打印】
console.log('打印 url 图片')
console.image("https://bicool-public.oss-cn-shenzhen.aliyuncs.com/u/33/assets/squirrel-640_419.jpg",0.5);
// 支持 base64
console.log('打印 base64 图片（一张蓝色的 50x50 的 base64图片）')
console.image("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAJVJREFUaEPt0sEJACEQxdCx/05sUnsIBESy9/lg3q7Z58wH3+ohjykm8hjIJJKIVKBfSwqLZxPB6aTDRKSweDYRnE46TEQKi2cTwemkw0SksHg2EZxOOkxECotnE8HppMNEpLB4NhGcTjpMRAqLZxPB6aTDRKSweDYRnE46TEQKi2cTwemkw0SksHg2EZxOOkxECotnLye9hQPSKIt5AAAAAElFTkSuQmCC",1);