JS 实现浏览器控制台打印图片 console.image()

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

// 实现 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);