Blob 对象及 Base64 转换指南

Blob 对象及 Base64 转换指南

一、Blob 对象详解

核心概念

Blob(Binary Large Object) 是 JavaScript 处理二进制数据的核心对象:

  • 不可变性:创建后内容不可修改(可通过切片创建新 Blob)
  • 类型标识 :通过 MIME 类型(如image/png)描述数据格式
  • 大文件支持:专为处理浏览器中的大型二进制数据设计

主要应用场景

  1. 文件操作<input type="file">获取的 File 对象继承自 Blob

    javascript 复制代码
    document.querySelector("input").addEventListener("change", (e) => {
      const file = e.target.files[0]; // File继承自Blob
      console.log(file.size); // 文件大小
    });
  2. 动态文件下载

    javascript 复制代码
    const blob = new Blob(["Hello, World!"], { type: "text/plain" });
    const url = URL.createObjectURL(blob);
    
    const a = document.createElement("a");
    a.href = url;
    a.download = "file.txt";
    a.click();
    
    URL.revokeObjectURL(url); // 释放内存
  3. 分片上传

    javascript 复制代码
    async function upload(file) {
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      for (let start = 0; start < file.size; start += CHUNK_SIZE) {
        const chunk = file.slice(start, start + CHUNK_SIZE);
        await fetch("/upload", { method: "POST", body: chunk });
      }
    }
  4. 媒体预览

    javascript 复制代码
    const img = document.getElementById("preview");
    img.src = URL.createObjectURL(file);

二、关键 API

构造函数

new Blob(array, options)

  • array:数据源数组(ArrayBuffer/String/Blob)
  • options
    • type:MIME 类型(默认""

实例方法

javascript 复制代码
blob.size; // 字节大小
blob.type; // MIME类型
blob.slice(); // 分割Blob
blob.stream(); // 返回ReadableStream
blob.arrayBuffer(); // 转为ArrayBuffer(异步)
blob.text(); // 转为文本(异步)

三、Base64 转 Blob 实践

转换函数实现

javascript 复制代码
function base64ToBlobUrl(base64Data, mimeType) {
  // 1. Base64解码
  const byteChars = atob(base64Data);

  // 2. 创建二进制数组
  const byteArray = new Uint8Array(byteChars.length);
  for (let i = 0; i < byteChars.length; i++) {
    byteArray[i] = byteChars.charCodeAt(i);
  }

  // 3. 创建Blob并生成URL
  const blob = new Blob([byteArray], { type: mimeType });
  return URL.createObjectURL(blob);
}

使用示例

javascript 复制代码
// 音频播放
const audioUrl = base64ToBlobUrl(base64Data, "audio/mpeg");
const audio = new Audio(audioUrl);
audio.play();

// 图片预览
const img = document.createElement("img");
img.src = base64ToBlobUrl(base64Image, "image/jpeg");
document.body.appendChild(img);

五大核心优势

  1. 内存优化:避免 Base64 的 33%体积膨胀
  2. 流式处理:支持边加载边播放
  3. 安全合规 :规避 CSP 对data:协议的限制
  4. 隐私保护:敏感数据无需网络传输
  5. 性能提升:本地转换减少服务器压力

四、关键注意事项

  1. 内存管理:及时释放资源

    javascript 复制代码
    const url = base64ToBlobUrl(data, "audio/mp3");
    audio.src = url;
    
    // 播放结束后释放
    audio.onended = () => URL.revokeObjectURL(url);
  2. MIME 类型对照表

    实际格式 正确 MIME 类型
    MP3 audio/mpeg
    WAV audio/wav
    PNG image/png
    JPEG image/jpeg
  3. 大文件处理优化

    javascript 复制代码
    function chunkedBase64ToBlob(base64Data, mimeType, chunkSize = 1_000_000) {
      const chunks = [];
      for (let i = 0; i < base64Data.length; i += chunkSize) {
        const chunk = base64Data.slice(i, i + chunkSize);
        const byteChars = atob(chunk);
        const byteArray = new Uint8Array(byteChars.length);
        for (let j = 0; j < byteChars.length; j++) {
          byteArray[j] = byteChars.charCodeAt(j);
        }
        chunks.push(byteArray);
      }
      return URL.createObjectURL(new Blob(chunks, { type: mimeType }));
    }

五、实际应用场景

语音消息处理

javascript 复制代码
// 接收Base64语音
socket.on("voice-message", (data) => {
  const audio = new Audio(base64ToBlobUrl(data, "audio/webm"));

  // 播放后自动清理
  audio.onended = () => {
    URL.revokeObjectURL(audio.src);
    audio.remove();
  };

  document.body.appendChild(audio);
  audio.play();
});

Canvas 图像导出

javascript 复制代码
// Canvas转Blob预览
canvas.toBlob((blob) => {
  const img = new Image();
  img.src = URL.createObjectURL(blob);
  img.onload = () => URL.revokeObjectURL(img.src);
  document.body.appendChild(img);
}, "image/png");

六、浏览器兼容方案

javascript 复制代码
// 旧浏览器兼容处理
if (typeof atob === "undefined") {
  window.atob = function (encoded) {
    return Buffer.from(encoded, "base64").toString("binary");
  };
}

if (!URL.createObjectURL) {
  URL.createObjectURL = function (blob) {
    return `data:${blob.type};base64,${btoa(
      new Uint8Array(blob).reduce(
        (data, byte) => data + String.fromCharCode(byte),
        ""
      )
    )}`;
  };
}

最佳实践:Blob 对象是浏览器端处理二进制数据的基石,结合 Base64 转换技术,可在保证性能的前提下实现丰富的文件操作功能。关键要掌握内存管理、类型匹配和分块处理三大核心技巧。

相关推荐
雪碧聊技术5 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了7 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust