Chrome 在浏览器控制台中查看base64编码的PNG

dgiusagp  于 2023-06-27  发布在  Go
关注(0)|答案(2)|浏览(496)

我经常使用base64编码的PNG,并希望预览它们。
我目前的工作流程是将console.log(base64PNG)复制到控制台,然后将图像复制到像https://base64.guru/converter/decode/image/png这样的网站,在那里我可以解码+预览图像。

有没有办法(前)一个Chrome扩展程序),我可以在控制台内预览这些?

dw1jzc5e

dw1jzc5e1#

您可以在控制台(chrome)中显示图像请参阅https://github.com/adriancooney/console.image
我快速浏览了一下代码并创建了一个简单的示例(CSS填充/高度/宽度等不正确,但它可以工作)

console.log("%c Image", "background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACvSURBVEhL7ZTBDYQgEEW3G/qxGm9Uwc0O7MGEJrxagEXM4uxIUAf/wRCTzbzMYSAkD/8QP+Rd02JBO0wAMQHEBJDXBQuF/FfpZW8dyHe0XnoVIBgdjZP0saMwHHvWx0U2Ve4E59tNxTL1jkKhrIEEOZ9fFb6533ZmWVVBgj33M/w1MTlqB3ZuZ1CPWGbDB/KQVMCQD68ohc6Jb+FoL0oFCR5jAogJICaA/I2gXXn3BSpPGV5H5sKpAAAAAElFTkSuQmCC'); background-size: 32px 32px; line-height: 32px; font-size: 1px; padding: 32px;").

下面的函数应该会有所帮助,我不知道如何阻止它重复图像,所以我只是添加了background-repeat: no-repeat

function logimage(h, w, uri) {
    console.log("%c+",`font-size: 1px; padding: ${Math.floor(h/2)}px ${Math.floor(w/2)}px; line-height: ${h}px;background: url('${uri}'); background-size: ${h}px ${w}px; background-repeat: no-repeat; color: transparent;`)
}

根据base64字符串的源代码,创建一个bookmarklet来自动化这个过程应该非常简单。

ogsagwnx

ogsagwnx2#

你可以创建一个Image对象,并将base64作为它的src,包括data:image...像这样的部分:

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

这就是他们所谓的“数据URI”,这里是内心平静的兼容表。

相关问题