如何在浏览器控制台预览Base64编码的PNG图片？

有几种实用方法可以帮你跳过第三方网站，直接在Chrome控制台里预览Base64格式的PNG：

方法1：自定义控制台预览函数 #

在Chrome控制台中定义一个自定义方法，之后就能快速调用预览：

console.img = function(base64String) {
  const img = new Image();
  img.src = base64String;
  // 可选：设置图片最大显示尺寸，避免过大占满控制台
  img.style.maxWidth = '400px';
  img.style.maxHeight = '400px';
  console.log(img);
};

使用时直接传入你的Base64字符串：

console.img(base64PNG);

控制台会直接显示图片缩略图，点击还能查看原图大小。

方法2：临时快速预览（无需自定义函数） #

如果只是临时预览，直接在控制台执行以下代码即可：

const img = new Image();
img.src = base64PNG;
console.log(img);

方法3：Chrome扩展实现持久化支持 #

如果需要每次打开控制台都能直接使用这个功能，可以自己写一个简单的Chrome扩展，通过内容脚本自动注入上述自定义函数到所有页面：

1. 创建一个扩展文件夹，里面新建manifest.json：

{
  "manifest_version": 3,
  "name": "Console Image Preview",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

2. 新建content.js文件，写入自定义函数：

console.img = function(base64String) {
  const img = new Image();
  img.src = base64String;
  img.style.maxWidth = '400px';
  img.style.maxHeight = '400px';
  console.log(img);
};

3. 在Chrome的扩展管理页面开启开发者模式，加载已解压的扩展，之后所有页面的控制台都能直接用console.img()预览Base64图片。

内容的提问来源于stack exchange，提问作者David Ferris