首页 > 编程语言 >JavaScript 小知识:轻松搞定 ArrayBuffer 到 Base64 的转换

JavaScript 小知识:轻松搞定 ArrayBuffer 到 Base64 的转换

时间:2024-10-07 14:48:55浏览次数:6  
标签:JavaScript TextDecoder ArrayBuffer Base64 Uint8Array btoa new

  关键词:ArrayBuffer, Base64, 栈溢出, TextDecoder, btoa, 性能优化, JavaScript, 兼容性

摘要

  本文探讨了在 JavaScript 中将 ArrayBuffer 转换为 Base64 字符串时遇到的栈溢出问题,并提供了几种实用的解决方案。我们将通过生动的比喻来解释相关概念,比较不同方法的性能和兼容性,最终提供一个平衡而实用的方法。

正文

前置概念

  1. ArrayBuffer:就像一个巨大的数字水池,里面装满了 0 和 1。
  2. Base64:一种字符编码格式,它用 64 个字符(A-Z, a-z, 0-9, +, /)​来表示数据。
  3. TextDecoder:就像一个神奇的翻译器,能够将水池里的数字变成普通的文字。
  4. btoa:这个函数就像一个魔术师,能将普通文字变成 Base64 编码。

问题引入:将图片数据转为 Base64 时遇到意外

  在前端开发中,我们经常需要处理从服务器获取的图片数据。有时,我们需要将这些数据(ArrayBuffer )转换为 Base64 格式,以便进一步处理,或者进一步向其他位置传播。

  通常我们会使用如下代码:

const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

  工作原理

  1. new Uint8Array(arrayBuffer):

    • 这一步将 ArrayBuffer 转换为 Uint8Array。
    • 可以将其想象为把一大桶水(ArrayBuffer)倒入一排整齐的小杯子(Uint8Array)中,每个杯子恰好装 8 位(1字节)的数据。
  2. String.fromCharCode.apply(null, ...):

    • String.fromCharCode​ 是一个方法,它接受一系列 Unicode 值,并返回由这些值组成的字符串。
    • .apply(null, ...)​ 的作用是将 Uint8Array 中的所有元素作为独立参数传递给 String.fromCharCode​。这就像是试图一次性抓住所有的小水杯。
  3. btoa(...):

    • 最后,btoa​ 函数将生成的字符串编码为 Base64。

  这种方法对于小型 ArrayBuffer 来说非常高效,因为它简洁且直接。

  然而,当我们尝试将较大的图片转换为 Base64 字符串时,这段代码就会抛出以下错误:

RangeError: Maximum call stack size exceeded

  为什么会栈溢出呢,问题出在 String.fromCharCode.apply()​ 方法上。当处理大型 ArrayBuffer 时,这种方法试图一次性将所有数据作为参数传递给函数,导致超出了 JavaScript 的调用栈限制。

  想象你正在尝试将一个巨大的拼图(ArrayBuffer)快速组装起来:

  1. 首先,你把所有拼图块整齐地排列在桌上(创建 Uint8Array)。
  2. 然后,你试图一次性抓起所有拼图块(apply​ 方法),想要立即将它们组合成完整的图像(String.fromCharCode​)。
  3. 最后,你要给这幅拼好的图像加上特殊的装裱(btoa​ 转换为 Base64)。

  问题在于,当拼图太大时,你的手(JavaScript 的调用栈)无法一次抓住所有的拼图块,导致它们洒落一地(栈溢出错误)。

  那么,如何优雅地解决这个问题,实现大型 ArrayBuffer 到 Base64 的转换呢?让我们探索几种有效的方法。

解决方案详解

  1. 使用 reduce​ 方法

    这种方法就像用一个小勺子,一勺一勺地舀水。虽然不会溢出,但可能会花很长时间。

    const base64 = btoa(new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), ''));
    
  2. 现代方法:TextDecoder + btoa

    这就像有了一个高效的抽水泵(TextDecoder)和一个快速的净化器(btoa)。既快速又安全!

    const text = new TextDecoder().decode(new Uint8Array(arrayBuffer));
    const base64 = btoa(text);
    
  3. 使用 reduce​ 方法

    这种方法就像用一个小勺子,一勺一勺地舀水。虽然不会溢出,但可能会花很长时间。

    const base64 = btoa(new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), ''));
    

    工作原理:

    • 首先,将 ArrayBuffer 转换为 Uint8Array,就像把水倒入一个个小杯子里。
    • 然后,使用 reduce​ 方法遍历每个字节(每个小杯子),将其转换为字符。
    • 每次迭代都会创建一个新的字符串,就像把每个小杯子的水倒入一个逐渐变大的容器中。
    • 最后,使用 btoa​ 将得到的字符串转换为 Base64。

    为什么慢:

    • 字符串拼接操作(data + String.fromCharCode(byte)​)在每次迭代中都会创建一个新的字符串。
    • 对于大型 ArrayBuffer,这意味着创建成千上万个中间字符串,就像在倒水过程中不断更换容器。
    • 这种频繁的内存分配和释放操作会显著降低性能。
  4. 现代方法:TextDecoder + btoa

    这种方法就像拥有一台高效的自动灌装机。它能迅速将整桶水(ArrayBuffer)直接灌入瓶子(Base64字符串),既快速又安全。

    const text = new TextDecoder().decode(new Uint8Array(arrayBuffer));
    const base64 = btoa(text);
    

    工作原理:

    • TextDecoder 像一个智能转换器,能够一次性将整个 Uint8Array 转换为字符串。
    • 这个过程就像是用一根大管子,直接将水从桶中抽出并过滤。
    • 然后,btoa​ 函数作为最后的包装步骤,将字符串转换为 Base64 编码。

    为什么快:

    • TextDecoder 是在底层实现的,利用了浏览器的原生优化。就像一台精心设计的工业级设备。
    • 它能够一次性处理整个数组,避免了频繁的字符串创建和拼接操作。

  在实际编程中,对于小型数据,两种方法的差异可能不明显。但当处理大型 ArrayBuffer(比如高分辨率图片数据)时,现代方法的优势就会非常明显,可能会将处理时间从秒级降低到毫秒级。

兼容代码

const arrayBufferToBase64 = (buffer) => {
  if (typeof TextDecoder !== 'undefined' && typeof btoa !== 'undefined') {
    return btoa(new TextDecoder().decode(new Uint8Array(buffer)));
  } else {
    return btoa(new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), ''));
  }
}

  这个函数首先检查环境是否支持 TextDecoder 和 btoa。如果支持,就使用高性能的现代方法;如果不支持,则回退到使用 reduce 方法,确保最大兼容性。

结语

  在处理 ArrayBuffer 到 Base64 的转换时,现代的 TextDecoder + btoa 方法通常是最佳选择,但在需要更广泛兼容性的情况下,可以考虑使用 reduce 方法作为备选。

  ‍

标签:JavaScript,TextDecoder,ArrayBuffer,Base64,Uint8Array,btoa,new
From: https://www.cnblogs.com/beijixiaohu/p/18450097/javascript-small-knowledge-easy-to-get-the-

相关文章

  • Java vs JavaScript:类型系统的艺术 - 从 Object 到 any,从静态到动态
    关键词:Java,JavaScript,TypeScript,类型系统,静态类型,动态类型,软件开发,编程语言比较摘要:本文深入探讨Java、JavaScript和TypeScript三种语言的类型系统特点,从建筑学角度比喻它们的设计理念,分析各自在处理灵活数据结构时的优劣,并思考类型系统对软件开发的深......
  • Java vs JavaScript:类型系统的艺术 - 从 Object 到 any,从静态到动态
    关键词:Java,JavaScript,TypeScript,类型系统,静态类型,动态类型,软件开发,编程语言比较摘要:本文深入探讨Java、JavaScript和TypeScript三种语言的类型系统特点,从建筑学角度比喻它们的设计理念,分析各自在处理灵活数据结构时的优劣,并思考类型系统对软件开发的深......
  • Java vs JavaScript:类型系统的艺术 - 从 Object 到 any,从静态到动态
    关键词:Java,JavaScript,TypeScript,类型系统,静态类型,动态类型,软件开发,编程语言比较摘要:本文深入探讨Java、JavaScript和TypeScript三种语言的类型系统特点,从建筑学角度比喻它们的设计理念,分析各自在处理灵活数据结构时的优劣,并思考类型系统对软件开发的深......
  • Java vs JavaScript:类型系统的艺术 - 从 Object 到 any,从静态到动态
    关键词:Java,JavaScript,TypeScript,类型系统,静态类型,动态类型,软件开发,编程语言比较摘要:本文深入探讨Java、JavaScript和TypeScript三种语言的类型系统特点,从建筑学角度比喻它们的设计理念,分析各自在处理灵活数据结构时的优劣,并思考类型系统对软件开发的深......
  • [Javascript] Circular dependency
    Weoftenseecirculardependency,whyit'saproblem,whyweshouldavoiditandhwotoavoidit?  Let'sseeanyexamplefirst//main.jsimportAfrom"moduleA"//moduleA.jsimportBfrom"./moduleB"console.log("M......
  • 面向-SAP-ABAP-开发者的-JavaScript-基础知识-全-
    面向SAPABAP开发者的JavaScript基础知识(全)原文:JavaScriptEssentialsforSAPABAPDevelopers协议:CCBY-NC-SA4.0一、JavaScript简介本章为ABAP开发者提供了JavaScript的介绍。我们先从学习JavaScript的必备知识开始。然后,我们将介绍JavaScript的基础知识,以......
  • Vue Javascript 导出Excel:SheetJS/js-xlsx json_to_sheet xlsx 修改表头名称和展示的
     import*asXLSXfrom'xlsx';//展示的顺序,把data中对象的属性按照你想要的顺序排放就可以了,constheader=["pId","dID"]//展示的名称constheaderDisplay={pId:"项编号",dID:"D编号"};//将表头放剑原始数据里面去,要保证表头在数......
  • [JavaScript] this 关键字
    全局作用域在浏览器中,如果在全局作用域下使用this,它将指向window对象;在Node.js环境中,则指向global对象。方法调用当一个函数作为对象的方法被调用时,this会指向该对象。constobj={name:"Alice",greet:function(){console.log(`Hello,${this.name}`)......
  • 从 JavaScript 到 OCaml:浅浅浅总结一下函数式编程
    背景这几天突击了一下Cornell的cs3110;抽了两个下午刷完了Chapter3,4,5的课后习题,很有感触。结合自己浅薄的函数式编程理解和贫瘠的JavaScript/TypeScript开发经历,总结一下自己第一阶段的函数式编程学习经历。......
  • 盘点五大热门JavaScript图表库,助你高效开发!
    1、Chart.jsChart.js是一个简单、灵活的图表库,支持8种图表类型(如折线图、柱状图、饼图等)。它使用HTML5Canvas元素来渲染图表,并且有良好的文档和社区支持。使用方法:npminstallchart.jsvue-chartjs然后在你的Vue组件中使用:<template><div><line-chart:data......