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

作者站长头像
站长
· 阅读数 23

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

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

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

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

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

回复
1个回答
avatar
test
2024-06-29

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

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

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

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

比如:

answer image

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

answer image

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

answer image

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


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

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容