翼度科技»论坛 编程开发 JavaScript 查看内容

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

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的
虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
先上演示案例:

在线演示 https://bi.cool/bi/W1P1cyq
(chrome 浏览器上演示效果)

实现 console.image():

参考 Github 上已实现的库 https://github.com/adriancooney/console.image Star 1.8k(本文发布前)。 实现代码如下:
  1. // 实现 console.image 函数【注意,url如果是网络图片必须开启了跨域访问才能打印】
  2. console.image = function (url, scale) {
  3.   const img = new Image()
  4.   img.crossOrigin = "anonymous"
  5.   img.onload = () => {
  6.     const c = document.createElement('canvas')
  7.     const ctx = c.getContext('2d')
  8.     if (ctx) {
  9.       c.width = img.width
  10.       c.height = img.height
  11.       ctx.fillStyle = "red";
  12.       ctx.fillRect(0, 0, c.width, c.height);
  13.       ctx.drawImage(img, 0, 0)
  14.       const dataUri = c.toDataURL('image/png')
  15.       console.log(`%c sup?` ,
  16.         `
  17.           font-size: 1px;
  18.           padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
  19.           background-image: url(${dataUri});
  20.           background-repeat: no-repeat;
  21.           background-size: ${img.width * scale}px ${img.height * scale}px;
  22.           color: transparent;
  23.         `
  24.       )
  25.     }
  26.   }
  27.   img.src = url
  28. }
复制代码
使用方式:
  1. // 支持 图片地址【注意,url如果是网络图片则必须开启了跨域访问才能打印图片】
  2. console.image("替换为 图片 url", 0.5);
  3. // 支持 base64
  4. console.image("替换为 base64 字符串", 1);
复制代码
上面仅展示 console.image() 的代码,因为原库还包含 console.meme() 的实现,用于在控制台生成表情包,感兴趣的同学可以去该库查看详情。
该库上一次更新已经将近10年了,由于近些年 Chrome 控制台中工作方式有变更,导致作者原版实现会使图片重复显示一次。 遇到相同问题的人提了 issues,本文章代码已根据 issues 里提供的解决方案进行了修复。
实现说明:

console.image() 借助于 console.log 能够使用 %c 为打印内容定义样式 的方式进行实现,例如:
  1. // 下面的代码将会在控制台打印出带样式的文本
  2. console.log("这是 %c一条带样式的消息", `
  3.     font-style: italic;
  4.     color: cyan;
  5.     background-color: red;
  6. `);
复制代码
下载本案例源码:https://bi.cool/bi/W1P1cyq
参考资料 Reference :
https://developer.mozilla.org/zh-CN/docs/Web/API/console

来源:https://www.cnblogs.com/liuhangui/p/18197660/console-image
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具