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这回事。在JavaScript中,有一个很常用的引用数据类型Array,你可以在里面放字符串、数字、对象、布尔值等等等等。它存放在堆中,可以自由增减。ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组,通常在其他语言中称为“byte array”。它的诞生就是为了解决一个问题:操作二进制数据。只由0和1组成的二进制数据往往是非常巨大的,上千个字节可以说司空见惯,传统的Array这时候处理起二进制数据起来就显得非常低效,所以ArrayBuffer出现了,它作为一免费云主机域名块专用的内存区域存放在栈中,取数据非常快。我们现在通过new ArrayBuffer(10)初始化一个buffer实例,看看会得到什么。可以看到在ArrayBuffer中,主要存放了几个“视图”,Int8Array表示8位有符号整数数组,Int16Array表示16位有符号整数数组,Uint8Array则表示8位无符号整数数组。当然,如果比如说我们想取出Int8Array这个数组来,是不能直接通过buffer.Int8Array来取的。这是因为ArrayBuffer不能直接通过下标去读写,我们需要把它转成一个类型化数组(TypedArray)。你不能直接操作 ArrayBuffer 的内容,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。转化完之后,我们我们不仅可以通过下标去对类型化数组进行索引,也可以获取其length,当然TypedArray仍与普通的Array存在细微的区别,那就是假设我们用超出边界的索引语法去获取数组元素时,TypedArray并不会去原型链中进行查找。现在我们已经拿到了这个类型化数组,是时候把它转成普通字符串了。看看String.fromCharCode这个函数,它接受的参数为一堆代码单元序列,输出一个普通字符串。而我们刚刚得到的类型化数组,里面存放的正是代码单元。这里我们用拓展运算符…把类型数组的代码单元解出来,一次性转完,得到一个普通的字符串。最后,我们需要借助一个window对象的方法,也就是btoa方法,它的作用是:把一个普通字符串编码成base-64格式的字符串。上面看似很好,但是在最后一步,btoa,在小程序中是没有该方法的去使用的。需要自己去实现btoa这个方法。因为该函数,在浏览器中已经实现,所以更多使用在小程序及node环境中。所以总体以module.exports进行方法的输出,以require形式进行引入。输出方法引入文件base64.js有时候后台把图片资源通过arrayBuffer传给前端,这时候为了能正常显示,我们还需要在转化的base64字符串前面拼接上data:image/jpeg;base64,所以我们整理一下,可以得出这样一个函数:整个流程如下:得到一个ArrayBuffer —> 转成类型化数组以正常读取(Uint8Array) –> 转成普通字符串(String.fromCharCode) –> 转成base64字符串(btoa)以上是“js怎么实现小程序wx.arrayBufferToBase64方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注百云主机行业资讯频道!

相关推荐: 获取Maven项目版本号的方式有哪些

小编给大家分享一下获取Maven项目版本号的方式有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!Maven 是经常用来创建项目的一个工具,主要是因为它方便项目构建、管理以及下载 jar 包。目前大多数Spring Boot项目都会打成Ja…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 10/08 09:09
下一篇 10/08 09:10

相关推荐