1. 从一次“另存为”失败说起为什么Blob图片这么特殊前几天有个做前端的朋友火急火燎地找我说他们产品里有个用户头像展示的功能用户反馈说右键“图片另存为”时保存下来的图片打不开是个损坏的文件。我一看他页面里图片的src属性既不是常见的http://或https://开头的网络地址也不是/static/logo.png这样的相对路径而是一串长得离谱、以blob:开头的奇怪字符串。他当时就懵了这玩意儿不就是个图片吗浏览器能正常显示怎么就不能像普通图片一样保存了呢这其实就是典型的Blob URL图片。在日常开发中尤其是涉及前端图像处理、Canvas绘图、WebRTC截图、或者从后端接收二进制流数据时我们经常会和这种“看得见却摸不着”的图片打交道。它不像传统的网络图片有一个实实在在的、可以复用的文件地址。Blob URL是浏览器为内存中的二进制数据Blob对象临时生成的一个本地引用它只在当前页面会话的生命周期内有效。一旦你刷新页面或者关闭标签页这个URL就失效了对应的内存数据也会被回收。这就是为什么你无法通过简单的右键另存为或者直接复制链接去其他地方访问的原因——它本质上不是一个持久的网络资源。所以“下载Blob类型地址的图片”这个需求背后其实是一个更本质的问题如何将浏览器内存中一段临时的、二进制的图片数据持久化地保存到用户的本地磁盘上。这不仅仅是前端开发者的痛点对于测试人员需要下载测试图片、数据分析师需要保存图表、甚至普通用户想保存网页上生成的二维码或截图来说都是一个非常实用的技能。理解了这一点我们才能有的放矢找到真正有效的解决方案。2. 深入理解Blob它到底是什么从哪来要解决问题得先搞清楚问题对象。BlobBinary Large Object是JavaScript中用于表示二进制数据的一个核心对象。你可以把它想象成一个装着原始数据的“黑盒子”这个盒子里可以是图片、PDF、音频、视频或者任何其他格式的二进制流。2.1 Blob URL的生成与本质我们看到的blob:http://example.com/550e8400-e29b-41d4-a716-446655440000这种地址是通过URL.createObjectURL(blob)这个API生成的。它的工作原理是你有一个Blob对象比如从Canvas的toBlob()方法得到或者从fetch请求的响应中获取。调用URL.createObjectURL(blob)浏览器会在内存中创建一个指向该Blob对象的映射并返回一个唯一的URL。将这个URL赋值给img标签的src、a标签的href或者作为window.open()的参数浏览器就能像加载普通网络图片一样从这个URL读取并展示Blob数据。关键在于这个URL是“本地”且“临时”的。它不经过网络直接指向浏览器内存。这也是它加载速度通常很快的原因。但它的生命周期与创建它的文档绑定且需要手动释放通过URL.revokeObjectURL(url)以避免内存泄漏。2.2 Blob的常见来源场景知道Blob从哪来才能知道去哪找它。在实际项目中Blob图片通常出现在以下场景Canvas绘图与截图这是最最常见的来源。无论是H5小游戏、在线绘图工具、图表库如ECharts导出图片还是网页截图功能最终都会通过canvas.toDataURL()得到Data URL或canvas.toBlob()得到Blob对象来生成图片数据。文件上传预览用户通过input typefile选择图片后前端常用FileReader.readAsDataURL()将其转为Data URL进行预览但更现代的做法是直接用URL.createObjectURL(file)生成Blob URL因为File对象本身就是Blob的子类性能更好。后端API返回的二进制流有些图片接口后端不返回图片URL而是直接返回图片的二进制流Content-Type: image/png。前端通过fetch或XMLHttpRequest接收后响应体response.body或response.blob()就是一个Blob对象。WebRTC与屏幕录制从视频流中捕获帧canvas.getContext(2d).drawImage(video)生成图片或者录制屏幕/标签页生成视频片段其输出通常是Blob。第三方库或浏览器扩展的处理结果例如一些图像处理库如CamanJS处理后的结果或者某些浏览器插件如一些图片批量下载工具内部操作生成的图片都可能以Blob URL的形式呈现。理解了这些来源当我们在页面上看到一个Blob图片时就可以逆向思考它是通过哪个环节产生的源头数据Canvas、File、二进制响应是否还在当前代码的可访问范围内这决定了我们采取哪种下载策略。3. 核心方法一前端主动出击从源头下载这是最可靠、最推荐的方式。既然Blob URL是从某个Blob对象生成的那么我们只要想办法拿到那个原始的Blob对象就能直接触发下载。前提是这个Blob对象还在你的JavaScript执行上下文中。3.1 基于Canvas的下载假设图片是由Canvas绘制或处理生成的这是最清晰的链路。// 假设有一个canvas元素 const canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d); // ... 进行一系列绘图操作 // 方法1使用 toBlob API (现代、推荐) canvas.toBlob(function(blob) { // 此时blob就是图片数据的Blob对象 downloadBlob(blob, my-image.png); }, image/png, 1.0); // 参数回调函数MIME类型图片质量(0-1) // 方法2使用 toDataURL 转为Base64再转Blob兼容性更好但数据量大 const dataURL canvas.toDataURL(image/png); const blob dataURLToBlob(dataURL); downloadBlob(blob, my-image.png); // 通用的Blob下载函数 function downloadBlob(blob, filename) { // 创建一个隐藏的a标签 const link document.createElement(a); link.style.display none; // 为Blob对象创建临时URL const url URL.createObjectURL(blob); link.href url; link.download filename; // 设置下载属性指定文件名 // 模拟点击触发下载 document.body.appendChild(link); link.click(); // 清理移除链接、释放Blob URL重要 document.body.removeChild(link); URL.revokeObjectURL(url); } // 将Data URL转换为Blob对象的辅助函数 function dataURLToBlob(dataURL) { const arr dataURL.split(,); const mime arr[0].match(/:(.*?);/)[1]; const bstr atob(arr[1]); // Base64解码 let n bstr.length; const u8arr new Uint8Array(n); while (n--) { u8arr[n] bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }为什么推荐toBlob因为它直接操作二进制数据避免了Base64编码解码的过程对于大图来说性能更好生成的文件体积也更小Base64会比原始二进制大33%左右。3.2 基于Fetch API或XHR接收的二进制流下载当从后端接口直接获取图片流时// 使用 Fetch API fetch(/api/get-image) .then(response { if (!response.ok) throw new Error(Network response was not ok); return response.blob(); // 关键将响应体解析为Blob对象 }) .then(blob { downloadBlob(blob, downloaded-image.jpg); }) .catch(error console.error(Download failed:, error)); // 使用传统的 XMLHttpRequest (兼容性更好可监控进度) function downloadViaXHR(url, filename) { const xhr new XMLHttpRequest(); xhr.open(GET, url, true); xhr.responseType blob; // 关键指定响应类型为blob xhr.onload function() { if (xhr.status 200) { const blob xhr.response; downloadBlob(blob, filename); } }; // 可选添加进度监听 xhr.onprogress function(event) { if (event.lengthComputable) { const percentComplete (event.loaded / event.total) * 100; console.log(Download progress: ${percentComplete.toFixed(2)}%); } }; xhr.send(); }实操心得对于大文件下载强烈建议使用XMLHttpRequest或fetch配合ReadableStream来实现进度条功能用户体验会好很多。responseType: blob这个设置是灵魂它告诉浏览器将接收到的二进制数据直接封装成Blob对象而不是尝试解析为文本。3.3 处理已存在的Blob URL有时图片已经以Blob URL形式存在于页面上比如第三方库生成的我们无法直接拿到原始的Blob对象。这时我们可以“借用”这个URL再通过一次网络请求把它“抓”回来。function downloadFromBlobURL(blobURL, filename) { fetch(blobURL) .then(res res.blob()) .then(blob { // 注意这里下载的文件名可能需要从其他地方获取或者根据MIME类型生成 // 可以从响应头中尝试获取文件名 const contentType blob.type; // e.g., image/png const ext contentType.split(/)[1] || bin; const finalFilename filename || downloaded-image.${ext}; downloadBlob(blob, finalFilename); }) .catch(err console.error(Failed to fetch blob URL:, err)); } // 使用示例从某个img元素的src属性获取Blob URL const imgElement document.querySelector(img.preview); if (imgElement.src.startsWith(blob:)) { downloadFromBlobURL(imgElement.src, captured-image.png); }注意这种方法存在一个潜在限制——同源策略。Blob URL的“源”是创建它的页面源。如果这个Blob URL是在当前页面生成的那么fetch它没问题。但如果这个Blob URL来自一个iframe且该iframe与父页面不同源或者来自某个浏览器扩展注入的内容那么直接fetch可能会因CORS跨域资源共享策略而失败。这是这种方法的局限性。4. 核心方法二解析与转换处理Base64 Data URL在热词里base64和Data URI被频繁提及它们和Blob关系密切。Data URL的格式是data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...它将文件内容用Base64编码后直接嵌入在URL里。它和Blob URL有相似之处都是本地数据但本质不同Data URL是文本字符串而Blob URL是引用。很多场景下我们拿到的是Data URL比如canvas.toDataURL()的结果。下载它的思路是先将Base64字符串解码还原成二进制数据再包装成Blob进行下载。// 复用上面的 dataURLToBlob 和 downloadBlob 函数 function downloadDataURL(dataURL, filename) { const blob dataURLToBlob(dataURL); downloadBlob(blob, filename); }为什么需要转换因为a download属性虽然也支持Data URL但有长度限制某些浏览器对Data URL的长度有约束且直接使用巨大的Base64字符串作为href在某些情况下性能不佳或不可靠。转换成Blob再下载是更通用、更稳健的做法。关于uni-app等跨端框架的特殊情况热词中提到了“uni.previewImage预览base64图片时手机闪退”和“移动端 uniappbase64 图片写入本地”。在移动端Hybrid开发中处理大图的Base64字符串需要格外小心。内存压力Base64字符串体积庞大在移动设备有限的内存中预览或处理大图极易引起闪退。解决方案是尽可能使用临时文件路径。在uni-app中可以使用uni.getFileSystemManager().writeFile将Base64写入临时文件得到filePath再用这个路径去预览或保存。Canvas绘图传参热词问“uni-app canvas画图方法drawImage能传base64图片吗”答案是可以但有更好的方法。drawImage可以直接接受Image对象。我们可以先创建一个Image对象将其src设为Data URL在onload回调中再绘制到Canvas上。但同样对于大图建议先将Base64写入临时文件再用本地文件路径加载Image以减轻内存负担。5. 浏览器环境外的攻坚插件、脚本与开发者工具当“前端主动出击”行不通时比如图片在你不控制的网页上或者你没有该页面的源码我们就需要借助外部工具。这也是热词中“360浏览器 blob 下载插件”所指向的需求。5.1 浏览器开发者工具“抢救”数据对于偶尔为之的下载打开开发者工具F12是最快的方法。网络抓包在“网络”(Network)面板中筛选Img类型。找到目标图片的请求其类型可能就是blob。点击这个请求在“响应”(Response)标签页里你能看到预览的图片。此时可以右键点击图片预览区域选择“另存为...”。如果不行看下一步。在控制台操作在“元素”(Elements)面板找到img标签获取其src即Blob URL。然后切换到“控制台”(Console)输入我们前面写的downloadFromBlobURL函数并执行传入这个Blob URL。前提是该Blob URL尚未失效且同源。从内存中寻找源头更底层的方法是在“源代码”(Sources)面板或“内存”(Memory)面板中查找可能存在的Canvas元素或存储Blob的变量。这需要一定的调试技巧。5.2 用户脚本UserScript自动化对于需要频繁从某个固定网站下载Blob图片的用户编写一个用户脚本如Tampermonkey、Violentmonkey插件支持的脚本是高效的选择。脚本的核心逻辑和我们前面写的JavaScript代码一样只是它会自动注入到目标页面中运行。// UserScript // name 下载特定Blob图片 // namespace http://tampermonkey.net/ // version 0.1 // description 在页面上添加按钮下载指定的Blob图片 // author You // match https://example.com/* // grant none // /UserScript (function() { use strict; // 等待页面加载 setTimeout(function() { // 找到目标图片这里假设它有一个特定的类名 const targetImg document.querySelector(img.target-blob-image); if (targetImg targetImg.src.startsWith(blob:)) { // 创建下载按钮 const downloadBtn document.createElement(button); downloadBtn.textContent 下载此图; downloadBtn.style.cssText position: fixed; top: 10px; right: 10px; z-index: 9999;; downloadBtn.onclick function() { downloadFromBlobURL(targetImg.src, page-image.png); }; document.body.appendChild(downloadBtn); } }, 3000); // 延迟3秒确保图片加载完成 })(); // 需要将前面定义的 downloadFromBlobURL 和 dataURLToBlob 函数也复制进来5.3 专用浏览器扩展如果觉得写脚本麻烦可以寻找现成的浏览器扩展。在Chrome或Edge的网上应用店搜索“Blob downloader”或“图片下载助手”等关键词可能会找到一些工具。这些扩展的原理通常也是通过内容脚本注入页面监听或抓取Blob请求然后提供下载按钮。选择时要注意扩展的评分和评价避免安装恶意软件。使用扩展的注意事项这类扩展通常需要较高的权限如“读取和更改您在所访问的网站上的所有数据”务必从官方商店下载并仔细审查其隐私政策。对于处理敏感信息的页面谨慎使用。6. 实战避坑指南与性能优化掌握了方法在实际操作中还会遇到各种坑。这里总结几个最常见的坑1跨域CORS问题这是fetch一个Blob URL时最容易遇到的问题。如果Blob URL的来源origin与当前执行fetch的页面来源不同浏览器会阻止请求。解决方案尽可能从源头生成该Blob的原始数据下载避免跨域fetch。如果无法避免且你能控制Blob的生成源可以在生成Blob的上下文中设置更宽松的CORS头如果它是通过一个请求得来的但这通常不现实。坑2Blob URL已失效Blob URL在其对应的Blob对象被垃圾回收或者手动调用URL.revokeObjectURL()后就会失效。尝试下载一个失效的Blob URL会得到网络错误。解决方案在生成Blob URL后尽快触发下载操作。避免在异步回调、用户长时间交互后才下载。如果页面是单页应用SPA在路由跳转前要完成下载逻辑。坑3文件名与MIME类型通过URL.createObjectURL()创建的Blob URL不携带任何文件名和MIME类型信息。下载时a download属性指定的文件名是唯一的设置途径。如果Blob是从一个未知来源获取的你可能不知道它是什么格式。解决方案从响应头获取如果Blob来自一个网络请求检查响应头中的Content-Disposition可能包含文件名和Content-Type确定MIME类型和扩展名。通过Blob.type判断Blob对象本身有type属性如image/png。可以据此生成扩展名。使用文件签名Magic Number对于没有正确MIME类型的Blob可以读取其前几个字节使用FileReader来判断实际文件格式。例如PNG文件的前8字节是0x89 0x50 0x4E 0x47 0x0D 0x0A 0x1A 0x0A。坑4大文件下载与内存溢出下载超大图片比如几十MB的卫星图时如果使用fetch().then(res res.blob())整个文件会先被完整读入内存中的Blob对象可能导致移动端或低配电脑浏览器标签页崩溃。优化方案使用流式处理Streams API。// 使用响应流和 createObjectURL 直接创建链接避免大Blob驻留内存 async function downloadLargeFile(url, filename) { const response await fetch(url); const contentLength response.headers.get(content-length); if (contentLength parseInt(contentLength) 100 * 1024 * 1024) { // 大于100MB console.warn(File is very large, consider streaming approach.); } // 即使使用blob()现代浏览器也会尝试流式处理 const blob await response.blob(); const downloadUrl URL.createObjectURL(blob); const a document.createElement(a); a.href downloadUrl; a.download filename; a.click(); // 注意对于超大文件revokeObjectURL的时机可能需要延迟确保下载开始后再清理 setTimeout(() URL.revokeObjectURL(downloadUrl), 1000); }对于极端情况可以考虑使用Service Worker配合Cache API进行分片下载和存储但这超出了普通下载需求的范畴。坑5移动端浏览器的兼容性与行为差异在iOS Safari或某些安卓浏览器中a download属性的行为可能不一致或者弹出预览而非直接下载。对于Blob URL有些浏览器可能不支持直接下载。解决方案优先使用通用方法将Blob转换为Data URL然后尝试通过window.open(dataURL)在新窗口打开引导用户手动长按保存。但这体验不好。使用第三方库如FileSaver.js它封装了各种浏览器的兼容性处理是处理文件下载的瑞士军刀。对于Hybrid App如uni-app务必使用框架提供的原生API如uni.downloadFile和uni.saveImageToPhotosAlbum它们能更好地与原生系统交互绕过浏览器的限制。7. 举一反三从下载到上传与处理的闭环理解了Blob的下载其实也就打通了前端处理二进制数据的任督二脉。很多操作是互逆的。上传用户通过input typefile选择的File对象就是Blob。你可以直接将它上传到服务器通过FormData也可以在客户端用FileReader读取为Data URL或ArrayBuffer进行处理。处理下载的Blob可以通过createImageBitmap(blob)转换为ImageBitmap直接在Canvas上绘制进行二次处理或者用URL.createObjectURL(blob)赋值给img、video、audio元素进行展示/播放。转换Blob、ArrayBuffer、Data URL、Base64字符串之间可以相互转换。FileReader的readAsArrayBuffer、readAsDataURL、readAsBinaryString等方法就是桥梁。我个人在实际项目中更倾向于建立一个清晰的数据流观念尽可能早地将数据转换为Blob或File对象进行流转仅在需要显示或传输时才转换为Data URL或Base64字符串。因为Blob是二进制数据的原生表示效率最高。而Base64作为一种文本编码只应在必须使用文本协议传输二进制数据如JSON、XML的场合使用比如在小数据量的API请求中嵌入图片或者用于CSS背景图。盲目使用Base64是前端性能的常见杀手之一。最后关于热词中提到的“visionpro里面的卡尺工具和blob分析怎么做”这属于专业的机器视觉库如OpenCV.js在前端的应用范畴。其流程通常是获取图像数据可能是Blob→ 解码为像素矩阵 → 使用算法进行Blob分析连通域标记等→ 在Canvas上绘制结果如卡尺测量线。下载这部分的结果图本质上还是回到我们讨论的Canvas下载或Blob下载流程。核心在于理解数据在不同形态Blob、ImageData、Canvas间的转换链路。
1. 从一次“另存为”失败说起为什么Blob图片这么特殊前几天有个做前端的朋友火急火燎地找我说他们产品里有个用户头像展示的功能用户反馈说右键“图片另存为”时保存下来的图片打不开是个损坏的文件。我一看他页面里图片的src属性既不是常见的http://或https://开头的网络地址也不是/static/logo.png这样的相对路径而是一串长得离谱、以blob:开头的奇怪字符串。他当时就懵了这玩意儿不就是个图片吗浏览器能正常显示怎么就不能像普通图片一样保存了呢这其实就是典型的Blob URL图片。在日常开发中尤其是涉及前端图像处理、Canvas绘图、WebRTC截图、或者从后端接收二进制流数据时我们经常会和这种“看得见却摸不着”的图片打交道。它不像传统的网络图片有一个实实在在的、可以复用的文件地址。Blob URL是浏览器为内存中的二进制数据Blob对象临时生成的一个本地引用它只在当前页面会话的生命周期内有效。一旦你刷新页面或者关闭标签页这个URL就失效了对应的内存数据也会被回收。这就是为什么你无法通过简单的右键另存为或者直接复制链接去其他地方访问的原因——它本质上不是一个持久的网络资源。所以“下载Blob类型地址的图片”这个需求背后其实是一个更本质的问题如何将浏览器内存中一段临时的、二进制的图片数据持久化地保存到用户的本地磁盘上。这不仅仅是前端开发者的痛点对于测试人员需要下载测试图片、数据分析师需要保存图表、甚至普通用户想保存网页上生成的二维码或截图来说都是一个非常实用的技能。理解了这一点我们才能有的放矢找到真正有效的解决方案。2. 深入理解Blob它到底是什么从哪来要解决问题得先搞清楚问题对象。BlobBinary Large Object是JavaScript中用于表示二进制数据的一个核心对象。你可以把它想象成一个装着原始数据的“黑盒子”这个盒子里可以是图片、PDF、音频、视频或者任何其他格式的二进制流。2.1 Blob URL的生成与本质我们看到的blob:http://example.com/550e8400-e29b-41d4-a716-446655440000这种地址是通过URL.createObjectURL(blob)这个API生成的。它的工作原理是你有一个Blob对象比如从Canvas的toBlob()方法得到或者从fetch请求的响应中获取。调用URL.createObjectURL(blob)浏览器会在内存中创建一个指向该Blob对象的映射并返回一个唯一的URL。将这个URL赋值给img标签的src、a标签的href或者作为window.open()的参数浏览器就能像加载普通网络图片一样从这个URL读取并展示Blob数据。关键在于这个URL是“本地”且“临时”的。它不经过网络直接指向浏览器内存。这也是它加载速度通常很快的原因。但它的生命周期与创建它的文档绑定且需要手动释放通过URL.revokeObjectURL(url)以避免内存泄漏。2.2 Blob的常见来源场景知道Blob从哪来才能知道去哪找它。在实际项目中Blob图片通常出现在以下场景Canvas绘图与截图这是最最常见的来源。无论是H5小游戏、在线绘图工具、图表库如ECharts导出图片还是网页截图功能最终都会通过canvas.toDataURL()得到Data URL或canvas.toBlob()得到Blob对象来生成图片数据。文件上传预览用户通过input typefile选择图片后前端常用FileReader.readAsDataURL()将其转为Data URL进行预览但更现代的做法是直接用URL.createObjectURL(file)生成Blob URL因为File对象本身就是Blob的子类性能更好。后端API返回的二进制流有些图片接口后端不返回图片URL而是直接返回图片的二进制流Content-Type: image/png。前端通过fetch或XMLHttpRequest接收后响应体response.body或response.blob()就是一个Blob对象。WebRTC与屏幕录制从视频流中捕获帧canvas.getContext(2d).drawImage(video)生成图片或者录制屏幕/标签页生成视频片段其输出通常是Blob。第三方库或浏览器扩展的处理结果例如一些图像处理库如CamanJS处理后的结果或者某些浏览器插件如一些图片批量下载工具内部操作生成的图片都可能以Blob URL的形式呈现。理解了这些来源当我们在页面上看到一个Blob图片时就可以逆向思考它是通过哪个环节产生的源头数据Canvas、File、二进制响应是否还在当前代码的可访问范围内这决定了我们采取哪种下载策略。3. 核心方法一前端主动出击从源头下载这是最可靠、最推荐的方式。既然Blob URL是从某个Blob对象生成的那么我们只要想办法拿到那个原始的Blob对象就能直接触发下载。前提是这个Blob对象还在你的JavaScript执行上下文中。3.1 基于Canvas的下载假设图片是由Canvas绘制或处理生成的这是最清晰的链路。// 假设有一个canvas元素 const canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d); // ... 进行一系列绘图操作 // 方法1使用 toBlob API (现代、推荐) canvas.toBlob(function(blob) { // 此时blob就是图片数据的Blob对象 downloadBlob(blob, my-image.png); }, image/png, 1.0); // 参数回调函数MIME类型图片质量(0-1) // 方法2使用 toDataURL 转为Base64再转Blob兼容性更好但数据量大 const dataURL canvas.toDataURL(image/png); const blob dataURLToBlob(dataURL); downloadBlob(blob, my-image.png); // 通用的Blob下载函数 function downloadBlob(blob, filename) { // 创建一个隐藏的a标签 const link document.createElement(a); link.style.display none; // 为Blob对象创建临时URL const url URL.createObjectURL(blob); link.href url; link.download filename; // 设置下载属性指定文件名 // 模拟点击触发下载 document.body.appendChild(link); link.click(); // 清理移除链接、释放Blob URL重要 document.body.removeChild(link); URL.revokeObjectURL(url); } // 将Data URL转换为Blob对象的辅助函数 function dataURLToBlob(dataURL) { const arr dataURL.split(,); const mime arr[0].match(/:(.*?);/)[1]; const bstr atob(arr[1]); // Base64解码 let n bstr.length; const u8arr new Uint8Array(n); while (n--) { u8arr[n] bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }为什么推荐toBlob因为它直接操作二进制数据避免了Base64编码解码的过程对于大图来说性能更好生成的文件体积也更小Base64会比原始二进制大33%左右。3.2 基于Fetch API或XHR接收的二进制流下载当从后端接口直接获取图片流时// 使用 Fetch API fetch(/api/get-image) .then(response { if (!response.ok) throw new Error(Network response was not ok); return response.blob(); // 关键将响应体解析为Blob对象 }) .then(blob { downloadBlob(blob, downloaded-image.jpg); }) .catch(error console.error(Download failed:, error)); // 使用传统的 XMLHttpRequest (兼容性更好可监控进度) function downloadViaXHR(url, filename) { const xhr new XMLHttpRequest(); xhr.open(GET, url, true); xhr.responseType blob; // 关键指定响应类型为blob xhr.onload function() { if (xhr.status 200) { const blob xhr.response; downloadBlob(blob, filename); } }; // 可选添加进度监听 xhr.onprogress function(event) { if (event.lengthComputable) { const percentComplete (event.loaded / event.total) * 100; console.log(Download progress: ${percentComplete.toFixed(2)}%); } }; xhr.send(); }实操心得对于大文件下载强烈建议使用XMLHttpRequest或fetch配合ReadableStream来实现进度条功能用户体验会好很多。responseType: blob这个设置是灵魂它告诉浏览器将接收到的二进制数据直接封装成Blob对象而不是尝试解析为文本。3.3 处理已存在的Blob URL有时图片已经以Blob URL形式存在于页面上比如第三方库生成的我们无法直接拿到原始的Blob对象。这时我们可以“借用”这个URL再通过一次网络请求把它“抓”回来。function downloadFromBlobURL(blobURL, filename) { fetch(blobURL) .then(res res.blob()) .then(blob { // 注意这里下载的文件名可能需要从其他地方获取或者根据MIME类型生成 // 可以从响应头中尝试获取文件名 const contentType blob.type; // e.g., image/png const ext contentType.split(/)[1] || bin; const finalFilename filename || downloaded-image.${ext}; downloadBlob(blob, finalFilename); }) .catch(err console.error(Failed to fetch blob URL:, err)); } // 使用示例从某个img元素的src属性获取Blob URL const imgElement document.querySelector(img.preview); if (imgElement.src.startsWith(blob:)) { downloadFromBlobURL(imgElement.src, captured-image.png); }注意这种方法存在一个潜在限制——同源策略。Blob URL的“源”是创建它的页面源。如果这个Blob URL是在当前页面生成的那么fetch它没问题。但如果这个Blob URL来自一个iframe且该iframe与父页面不同源或者来自某个浏览器扩展注入的内容那么直接fetch可能会因CORS跨域资源共享策略而失败。这是这种方法的局限性。4. 核心方法二解析与转换处理Base64 Data URL在热词里base64和Data URI被频繁提及它们和Blob关系密切。Data URL的格式是data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...它将文件内容用Base64编码后直接嵌入在URL里。它和Blob URL有相似之处都是本地数据但本质不同Data URL是文本字符串而Blob URL是引用。很多场景下我们拿到的是Data URL比如canvas.toDataURL()的结果。下载它的思路是先将Base64字符串解码还原成二进制数据再包装成Blob进行下载。// 复用上面的 dataURLToBlob 和 downloadBlob 函数 function downloadDataURL(dataURL, filename) { const blob dataURLToBlob(dataURL); downloadBlob(blob, filename); }为什么需要转换因为a download属性虽然也支持Data URL但有长度限制某些浏览器对Data URL的长度有约束且直接使用巨大的Base64字符串作为href在某些情况下性能不佳或不可靠。转换成Blob再下载是更通用、更稳健的做法。关于uni-app等跨端框架的特殊情况热词中提到了“uni.previewImage预览base64图片时手机闪退”和“移动端 uniappbase64 图片写入本地”。在移动端Hybrid开发中处理大图的Base64字符串需要格外小心。内存压力Base64字符串体积庞大在移动设备有限的内存中预览或处理大图极易引起闪退。解决方案是尽可能使用临时文件路径。在uni-app中可以使用uni.getFileSystemManager().writeFile将Base64写入临时文件得到filePath再用这个路径去预览或保存。Canvas绘图传参热词问“uni-app canvas画图方法drawImage能传base64图片吗”答案是可以但有更好的方法。drawImage可以直接接受Image对象。我们可以先创建一个Image对象将其src设为Data URL在onload回调中再绘制到Canvas上。但同样对于大图建议先将Base64写入临时文件再用本地文件路径加载Image以减轻内存负担。5. 浏览器环境外的攻坚插件、脚本与开发者工具当“前端主动出击”行不通时比如图片在你不控制的网页上或者你没有该页面的源码我们就需要借助外部工具。这也是热词中“360浏览器 blob 下载插件”所指向的需求。5.1 浏览器开发者工具“抢救”数据对于偶尔为之的下载打开开发者工具F12是最快的方法。网络抓包在“网络”(Network)面板中筛选Img类型。找到目标图片的请求其类型可能就是blob。点击这个请求在“响应”(Response)标签页里你能看到预览的图片。此时可以右键点击图片预览区域选择“另存为...”。如果不行看下一步。在控制台操作在“元素”(Elements)面板找到img标签获取其src即Blob URL。然后切换到“控制台”(Console)输入我们前面写的downloadFromBlobURL函数并执行传入这个Blob URL。前提是该Blob URL尚未失效且同源。从内存中寻找源头更底层的方法是在“源代码”(Sources)面板或“内存”(Memory)面板中查找可能存在的Canvas元素或存储Blob的变量。这需要一定的调试技巧。5.2 用户脚本UserScript自动化对于需要频繁从某个固定网站下载Blob图片的用户编写一个用户脚本如Tampermonkey、Violentmonkey插件支持的脚本是高效的选择。脚本的核心逻辑和我们前面写的JavaScript代码一样只是它会自动注入到目标页面中运行。// UserScript // name 下载特定Blob图片 // namespace http://tampermonkey.net/ // version 0.1 // description 在页面上添加按钮下载指定的Blob图片 // author You // match https://example.com/* // grant none // /UserScript (function() { use strict; // 等待页面加载 setTimeout(function() { // 找到目标图片这里假设它有一个特定的类名 const targetImg document.querySelector(img.target-blob-image); if (targetImg targetImg.src.startsWith(blob:)) { // 创建下载按钮 const downloadBtn document.createElement(button); downloadBtn.textContent 下载此图; downloadBtn.style.cssText position: fixed; top: 10px; right: 10px; z-index: 9999;; downloadBtn.onclick function() { downloadFromBlobURL(targetImg.src, page-image.png); }; document.body.appendChild(downloadBtn); } }, 3000); // 延迟3秒确保图片加载完成 })(); // 需要将前面定义的 downloadFromBlobURL 和 dataURLToBlob 函数也复制进来5.3 专用浏览器扩展如果觉得写脚本麻烦可以寻找现成的浏览器扩展。在Chrome或Edge的网上应用店搜索“Blob downloader”或“图片下载助手”等关键词可能会找到一些工具。这些扩展的原理通常也是通过内容脚本注入页面监听或抓取Blob请求然后提供下载按钮。选择时要注意扩展的评分和评价避免安装恶意软件。使用扩展的注意事项这类扩展通常需要较高的权限如“读取和更改您在所访问的网站上的所有数据”务必从官方商店下载并仔细审查其隐私政策。对于处理敏感信息的页面谨慎使用。6. 实战避坑指南与性能优化掌握了方法在实际操作中还会遇到各种坑。这里总结几个最常见的坑1跨域CORS问题这是fetch一个Blob URL时最容易遇到的问题。如果Blob URL的来源origin与当前执行fetch的页面来源不同浏览器会阻止请求。解决方案尽可能从源头生成该Blob的原始数据下载避免跨域fetch。如果无法避免且你能控制Blob的生成源可以在生成Blob的上下文中设置更宽松的CORS头如果它是通过一个请求得来的但这通常不现实。坑2Blob URL已失效Blob URL在其对应的Blob对象被垃圾回收或者手动调用URL.revokeObjectURL()后就会失效。尝试下载一个失效的Blob URL会得到网络错误。解决方案在生成Blob URL后尽快触发下载操作。避免在异步回调、用户长时间交互后才下载。如果页面是单页应用SPA在路由跳转前要完成下载逻辑。坑3文件名与MIME类型通过URL.createObjectURL()创建的Blob URL不携带任何文件名和MIME类型信息。下载时a download属性指定的文件名是唯一的设置途径。如果Blob是从一个未知来源获取的你可能不知道它是什么格式。解决方案从响应头获取如果Blob来自一个网络请求检查响应头中的Content-Disposition可能包含文件名和Content-Type确定MIME类型和扩展名。通过Blob.type判断Blob对象本身有type属性如image/png。可以据此生成扩展名。使用文件签名Magic Number对于没有正确MIME类型的Blob可以读取其前几个字节使用FileReader来判断实际文件格式。例如PNG文件的前8字节是0x89 0x50 0x4E 0x47 0x0D 0x0A 0x1A 0x0A。坑4大文件下载与内存溢出下载超大图片比如几十MB的卫星图时如果使用fetch().then(res res.blob())整个文件会先被完整读入内存中的Blob对象可能导致移动端或低配电脑浏览器标签页崩溃。优化方案使用流式处理Streams API。// 使用响应流和 createObjectURL 直接创建链接避免大Blob驻留内存 async function downloadLargeFile(url, filename) { const response await fetch(url); const contentLength response.headers.get(content-length); if (contentLength parseInt(contentLength) 100 * 1024 * 1024) { // 大于100MB console.warn(File is very large, consider streaming approach.); } // 即使使用blob()现代浏览器也会尝试流式处理 const blob await response.blob(); const downloadUrl URL.createObjectURL(blob); const a document.createElement(a); a.href downloadUrl; a.download filename; a.click(); // 注意对于超大文件revokeObjectURL的时机可能需要延迟确保下载开始后再清理 setTimeout(() URL.revokeObjectURL(downloadUrl), 1000); }对于极端情况可以考虑使用Service Worker配合Cache API进行分片下载和存储但这超出了普通下载需求的范畴。坑5移动端浏览器的兼容性与行为差异在iOS Safari或某些安卓浏览器中a download属性的行为可能不一致或者弹出预览而非直接下载。对于Blob URL有些浏览器可能不支持直接下载。解决方案优先使用通用方法将Blob转换为Data URL然后尝试通过window.open(dataURL)在新窗口打开引导用户手动长按保存。但这体验不好。使用第三方库如FileSaver.js它封装了各种浏览器的兼容性处理是处理文件下载的瑞士军刀。对于Hybrid App如uni-app务必使用框架提供的原生API如uni.downloadFile和uni.saveImageToPhotosAlbum它们能更好地与原生系统交互绕过浏览器的限制。7. 举一反三从下载到上传与处理的闭环理解了Blob的下载其实也就打通了前端处理二进制数据的任督二脉。很多操作是互逆的。上传用户通过input typefile选择的File对象就是Blob。你可以直接将它上传到服务器通过FormData也可以在客户端用FileReader读取为Data URL或ArrayBuffer进行处理。处理下载的Blob可以通过createImageBitmap(blob)转换为ImageBitmap直接在Canvas上绘制进行二次处理或者用URL.createObjectURL(blob)赋值给img、video、audio元素进行展示/播放。转换Blob、ArrayBuffer、Data URL、Base64字符串之间可以相互转换。FileReader的readAsArrayBuffer、readAsDataURL、readAsBinaryString等方法就是桥梁。我个人在实际项目中更倾向于建立一个清晰的数据流观念尽可能早地将数据转换为Blob或File对象进行流转仅在需要显示或传输时才转换为Data URL或Base64字符串。因为Blob是二进制数据的原生表示效率最高。而Base64作为一种文本编码只应在必须使用文本协议传输二进制数据如JSON、XML的场合使用比如在小数据量的API请求中嵌入图片或者用于CSS背景图。盲目使用Base64是前端性能的常见杀手之一。最后关于热词中提到的“visionpro里面的卡尺工具和blob分析怎么做”这属于专业的机器视觉库如OpenCV.js在前端的应用范畴。其流程通常是获取图像数据可能是Blob→ 解码为像素矩阵 → 使用算法进行Blob分析连通域标记等→ 在Canvas上绘制结果如卡尺测量线。下载这部分的结果图本质上还是回到我们讨论的Canvas下载或Blob下载流程。核心在于理解数据在不同形态Blob、ImageData、Canvas间的转换链路。
