js怎么实现小程序wx.arrayBufferToBase64方法

这篇文章主要为大家展示了“js怎么实现小程序wx.arrayBufferToBase64方法”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js怎么实现小程序wx.arrayBufferToBase64方法”这篇文章吧。

前言

在小程序开发中，需要将接口请求获得的arrayBuffer数据，转换为base64格式数据，进行图片的显示。

微信小程序提供了wx.arrayBufferToBase64方法，但很不幸，这个方法在基础库版本 2.4.0 起已废弃，已不推荐使用。

虽然目前即使小程序基础库版本为2.22.0，也能正常使用。但是不确定未来哪天，在更新的基础库中，该方法被删除。这样就会带来项目上的隐患。

所以需要自己去实现arrayBuffer转为base64这一过程。

探索失败的过程

• new FileReader()在小程序中无法进行使用。无法使用new FileReader()实例中的readAsDataURL方法将数据转为base64。如果不熟悉该方法，可以查看FileReader介绍

• URL.createObjectURL在小程序中无法使用。无法使用该方法将数据转为在内存中的地址，进而能被image标签进行引用。如果不熟悉该方法，可以查看URL.createObjectURL讲解

• window.btoa在小程序中无法使用。无法将文本直接转为base64格式。

好了，条条大路都被阻断了。那就该自己铺路搭桥了。

卡壳的arrayBuffer转base64

问题的起始条件有arrayBuffer数据，期望结果是最终形成base64格式数据。那开始进行求解。

首先我们得来说说arrayBuffer这回事。

在JavaScript中，有一个很常用的引用数据类型Array,你可以在里面放字符串、数字、对象、布尔值等等等等。它存放在堆中，可以自由增减。

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组，通常在其他语言中称为“byte array”。它的诞生就是为了解决一个问题：操作二进制数据。

只由0和1组成的二进制数据往往是非常巨大的，上千个字节可以说司空见惯，传统的Array这时候处理起二进制数据起来就显得非常低效，所以ArrayBuffer出现了，它作为一块专用的内存区域存放在栈中，取数据非常快。

我们现在通过new ArrayBuffer(10)初始化一个buffer实例，看看会得到什么。

let buffer = new ArrayBuffer(10);console.log(buffer);// 在控制台上显示如下ArrayBuffer(10)byteLength: 10[[Prototype]]: ArrayBuffer[[Int8Array]]: Int8Array(10)[[Uint8Array]]: Uint8Array(10)[[Int16Array]]: Int16Array(5)[[ArrayBufferByteLength]]: 10[[ArrayBufferData]]: 1367

可以看到在ArrayBuffer中，主要存放了几个“视图”，Int8Array表示8位有符号整数数组，Int16Array表示16位有符号整数数组，Uint8Array则表示8位无符号整数数组。

当然，如果比如说我们想取出Int8Array这个数组来，是不能直接通过buffer.Int8Array来取的。这是因为ArrayBuffer不能直接通过下标去读写，我们需要把它转成一个类型化数组（TypedArray）。

你不能直接操作 ArrayBuffer 的内容，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

const myTypedArray = new Uint8Array(buffer)

转化完之后，我们我们不仅可以通过下标去对类型化数组进行索引，也可以获取其length，当然TypedArray仍与普通的Array存在细微的区别，那就是假设我们用超出边界的索引语法去获取数组元素时，TypedArray并不会去原型链中进行查找。

现在我们已经拿到了这个类型化数组，是时候把它转成普通字符串了。看看String.fromCharCode这个函数，它接受的参数为一堆代码单元序列，输出一个普通字符串。而我们刚刚得到的类型化数组，里面存放的正是代码单元。

const str = String.fromCharCode(...myTypedArray)

这里我们用拓展运算符...把类型数组的代码单元解出来，一次性转完，得到一个普通的字符串。

最后，我们需要借助一个window对象的方法，也就是btoa方法，它的作用是：把一个普通字符串编码成base-64格式的字符串。

上面看似很好，但是在最后一步，btoa，在小程序中是没有该方法的去使用的。需要自己去实现btoa这个方法。

关键点btoa的实现

因为该函数，在浏览器中已经实现，所以更多使用在小程序及node环境中。所以总体以module.exports进行方法的输出，以require形式进行引入。

输出方法

module.exports = {  btoa: ...,  atob: ...}

引入文件

const { btoa } =  require('./base64')

base64.js

var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",  a256 = '',  r64 = [256],  r256 = [256],  i = 0;var UTF8 = {    encode: function (strUni) {    // use regular expressions & String.replace callback function for better efficiency    // than procedural approaches    var strUtf = strUni.replace(/[\u0080-\u07ff]/g, // U+0080 - U+07FF => 2 bytes 110yyyyy, 10zzzzzz      function (c) {        var cc = c.charCodeAt(0);        return String.fromCharCode(0xc0 | cc >> 6, 0x80 | cc & 0x3f);      })      .replace(/[\u0800-\uffff]/g, // U+0800 - U+FFFF => 3 bytes 1110xxxx, 10yyyyyy, 10zzzzzz        function (c) {          var cc = c.charCodeAt(0);          return String.fromCharCode(0xe0 | cc >> 12, 0x80 | cc >> 6 & 0x3F, 0x80 | cc & 0x3f);        });    return strUtf;  },    decode: function (strUtf) {    // note: decode 3-byte chars first as decoded 2-byte strings could appear to be 3-byte char!    var strUni = strUtf.replace(/[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g, // 3-byte chars      function (c) { // (note parentheses for precence)        var cc = ((c.charCodeAt(0) & 0x0f) << 12) | ((c.charCodeAt(1) & 0x3f) << 6) | (c.charCodeAt(2) & 0x3f);        return String.fromCharCode(cc);      })      .replace(/[\u00c0-\u00df][\u0080-\u00bf]/g, // 2-byte chars        function (c) { // (note parentheses for precence)          var cc = (c.charCodeAt(0) & 0x1f) << 6 | c.charCodeAt(1) & 0x3f;          return String.fromCharCode(cc);        });    return strUni;  }};while (i < 256) {  var c = String.fromCharCode(i);  a256 += c;  r256[i] = i;  r64[i] = b64.indexOf(c);  ++i;}function code(s, discard, alpha, beta, w1, w2) {  s = String(s);  var buffer = 0,    i = 0,    length = s.length,    result = '',    bitsInBuffer = 0;  while (i < length) {    var c = s.charCodeAt(i);    c = c < 256 ? alpha[c] : -1;    buffer = (buffer << w1) + c;    bitsInBuffer += w1;    while (bitsInBuffer >= w2) {      bitsInBuffer -= w2;      var tmp = buffer >> bitsInBuffer;      result += beta.charAt(tmp);      buffer ^= tmp << bitsInBuffer;    }    ++i;  }  if (!discard && bitsInBuffer > 0) result += beta.charAt(buffer << (w2 - bitsInBuffer));  return result;}var Plugin = function (dir, input, encode) {  return input ? Plugin[dir](input, encode) : dir ? null : this;};Plugin.btoa = Plugin.encode = function (plain, utf8encode) {  plain = Plugin.raw === false || Plugin.utf8encode || utf8encode ? UTF8.encode(plain) : plain;  plain = code(plain, false, r256, b64, 8, 6);  return plain + '===='.slice((plain.length % 4) || 4);};Plugin.atob = Plugin.decode = function (coded, utf8decode) {  coded = coded.replace(/[^A-Za-z0-9\+\/\=]/g, "");  coded = String(coded).split('=');  var i = coded.length;  do {    --i;    coded[i] = code(coded[i], true, r64, a256, 6, 8);  } while (i > 0);  coded = coded.join('');  return Plugin.raw === false || Plugin.utf8decode || utf8decode ? UTF8.decode(coded) : coded;};module.exports = {  btoa: Plugin.btoa,  atob: Plugin.atob}

修成正果

有时候后台把图片资源通过arrayBuffer传给前端，这时候为了能正常显示，我们还需要在转化的base64字符串前面拼接上data:image/jpeg;base64,

所以我们整理一下，可以得出这样一个函数：

const { btoa } =  require('./base64')const arrayBufferToBase64Img = (buffer) => {  const str = String.fromCharCode(...new Uint8Array(buffer));  return `data:image/jpeg;base64,${btoa(str)}`;}

整个流程如下：

得到一个ArrayBuffer ---> 转成类型化数组以正常读取(Uint8Array) --> 转成普通字符串(String.fromCharCode) --> 转成base64字符串(btoa)

以上是“js怎么实现小程序wx.arrayBufferToBase64方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！