如何下载 HTML 中 blob 图片

在 HTML 中，我们有时会遇到图片的 src 属性是 blob 地址，例如：

1
<img src="blob:https://xxx.xxx.com/02c00a0c-6ac8-484e-b682-4b698fece451" />

此时，我们可以通过以下方法来下载该图片：

用浏览器，访问目标网站，在开发者工具的 Console 中输入 JS 代码：

1
2
3
4
5
6
7
8
const img = document.querySelector('img[src^="blob:"]');
if (img) {
  const url = img.src;
  const a = document.createElement('a');
  a.href = url;
  a.download = 'image.png'; // 自定义文件名
  a.click();
}

如果下载的图片没有正常显示，可以通过 HxD 等工具查看图片的文件头，确认文件的真实格式。