LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

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

freeflydom
2024年5月30日 14:55 本文热度 192
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的

虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?

先上演示案例:

在线演示 https://bi.cool/bi/W1P1cyq

(chrome 浏览器上演示效果)

实现 console.image():

参考 Github 上已实现的库 https://github.com/adriancooney/console.image Star 1.8k(本文发布前)。 实现代码如下:

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

`);

下载本案例源码:https://bi.cool/bi/W1P1cyq

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



该文章在 2024/5/30 14:55:33 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved