其他网站的在线 blob 图片链接可以下载吗?

Question

这是一个互动视频 H5 的 demo，我觉得很有创意，我在查看源码的时候 network 面板发现 图片是不可以预览的，但是页面上却能正常渲染

单独打开图片资源显示如下

这个防止别人扒图好像很厉害，
有没有懂得大佬讲讲原理，这种把图片 url 以blob:https格式的链接有什么优势？
有没有可以下载的方法？
感谢🙏

Answer 1

其实这一点儿反爬措施都没有……

之所以在浏览器里你打开 Blob URL 看到的是一串乱码，只是因为 Blob URL 的响应标头没有 Content-Type 而已，浏览器不知道这是个什么类型的文件，所以只能默认按照纯文本去解析，所以得到了一串乱码。

但你可以直接抓个包把响应的字节流保存下来，自己写个程序转换一下就好了。

或者也可以直接在 DevTools 上右键 → 复制响应，就得到一个 Base64 后的响应信息了，随便找个 Base64 解码工具就好了。

比如：

然后我随便找了个在线图片 Base64 编解码的小工具（https://oktools.net/image2base64）：

把刚刚得到的那坨 Base64 响应粘贴进去，然后删掉开头没有用的那部分（红圈里那些），就得到图片了，然后你想要保存图片直接右键就好了：

P.S. 因为它这些素材图都是透明的 PNG 图片，所以在白色背景下看起来比较费劲，所以我改了一下网页的背景色变成黑色。

---

至于为啥它这里用 Blob URL，我简单看了看，是因为它这个其实是个 Flash 小游戏。但现代浏览器都不再支持直接播放 swf 文件了，所以它自己实现了一个 Flash 解码器，把 swf 文件里的素材提取成了 ArrayBuffer，然后用 URL.createObjectURL 转成了 Blob URL，再通过 Canvas 绘制出来，就成了现在你看到的这样了。

而为啥作者不直接搞 H5 小游戏、而是费这么大劲绕这么大圈，这我就不知道了……可能是作者更熟悉 Flash？