当前位置: 首页 > 游戏攻略 > 前端开发调试技巧:实现console.image()

前端开发调试技巧:实现console.image()

来源:网络 作者:趣玩小编 发布时间:2024-05-17 15:50:30

在前端开发过程中,我们经常使用console.log等方式来调试查看数据。但对于图片来说,仅仅通过展示数据与结构是无法准确想象出图片最终的呈现样式的。

虽然我们可以通过img标签将图片数据展示在页面上,或者下载图片后进行预览,但这样的调试过程比较复杂。那么,是否可以实现一个console.image()功能呢?

先上演示案例:

在线演示 这里

(chrome 浏览器上演示效果)

实现 console.image():

我们可以参考Github上已实现的库 console.image (本文发布前,获得了1.8k的star)。实现代码如下:

// 实现 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.image("替换为 图片 url", 0.5);
// 支持 base64
console.image("替换为 base64 字符出", 1);

上面仅展示了console.image()的代码,原库还包含console.meme()的实现,用于在控制台生成表情包。感兴趣的同学可以去该库查看详情。

但该库上一次更新已经将近10年了,由于近些年Chrome控制台中工作方式有变更,导致作者原版实现会使图片重复显示一次。遇到相同问题的人提了issues,本文章代码已根据issues里提供的解决方案进行了修复。

实现说明:

console.image() 借助于console.log的%c样式功能进行实现,示例代码如下:

// 下面的代码将会在控制台打印出带样式的文本
console.log("这是 %c一条带样式的消息", `
    font-style: italic;
    color: cyan;
    background-color: red;
`);

下载本案例源码: 这里

参考资料 Reference:
https://developer.mozilla.org/zh-CN/docs/Web/API/console

热门推荐 更多 +
休闲益智 | 945.71MB
我的世界是一款风靡全球的3D第一人称沙盒...
9.6
角色扮演 | 878.96MB
最新版《汉家江湖》是一款以武侠为题材、以...
9.5
飞行射击 | 262.79MB
《荒野乱斗》是快节奏射击类多人对战游戏。...
9.5
飞行射击 | 102.9M
掌上飞车手游app是由腾讯特别为QQ飞车...
9.2
休闲益智 | 263.56MB
开心消消乐是一款轻松休闲的手游,也是一款...
9.6