Shulou(Shulou.com)06/01 Report--

This article mainly shows you "js how to achieve Mini Program wx.arrayBufferToBase64 method", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve Mini Program js wx.arrayBufferToBase64 method" this article.

Preface

In the development of Mini Program, it is necessary to convert the arrayBuffer data obtained by the API request into base64 format data for picture display.

WeChat Mini Programs provides the wx.arrayBufferToBase64 method, but unfortunately, this method has been abandoned since the base library version 2.4.0 and is no longer recommended.

Although at present, even if the Mini Program base library version is 2.22.0, it can still be used normally. However, it is not certain when the method will be deleted in the updated base library. This will bring hidden dangers to the project.

So you need to realize the process of converting arrayBuffer to base64 by yourself.

Explore the process of failure

New FileReader () cannot be used in Mini Program. You cannot convert data to base64 using the readAsDataURL method in the new FileReader () instance. If you are not familiar with this method, you can check out the FileReader introduction

URL.createObjectURL is not available in Mini Program. You cannot use this method to convert the data to an address in memory, which can then be referenced by the image tag. If you are not familiar with this method, you can check out the URL.createObjectURL explanation

Window.btoa is not available in Mini Program. Cannot convert text directly to base64 format.

All right, all the roads are blocked. Then it's time to build your own road and bridge.

Transfer from arrayBuffer to base64 of jam

The starting condition of the problem is arrayBuffer data, and the expected result is to form data in base64 format. Then start solving.

First of all, we have to talk about arrayBuffer.

In JavaScript, there is a very common reference data type Array, in which you can put strings, numbers, objects, Boolean values, and so on. It is stored in the heap and can be added or decreased freely.

The ArrayBuffer object is used to represent generic, fixed-length raw binary data buffers. It is a byte array, often called "byte array" in other languages. It was born to solve a problem: manipulating binary data.

Binary data composed of only 0 and 1 is often very huge, thousands of bytes can be said to be common, traditional Array at this time to deal with binary data appears to be very inefficient, so ArrayBuffer appeared, it is stored in the stack as a dedicated memory area, fetching data very fast.

Let's now initialize a buffer instance with new ArrayBuffer (10) and see what we get.

Let buffer = new ArrayBuffer (10); console.log (buffer); / / display the following ArrayBuffer (10) byteLength: 10 [[Prototype]]: ArrayBuffer [[Int8Array]]: Int8Array (10) [[Uint8Array]]: Uint8Array (10) [Int16Array]]: Int16Array (5) [ArrayBufferByteLength]: 10 [ArrayBufferData]: 1367

You can see that there are mainly several "views" stored in ArrayBuffer. Int8Array represents an array of 8-bit signed integers, Int16Array represents an array of 16-bit signed integers, and Uint8Array represents an array of 8-bit unsigned integers.

Of course, if we want to take out the Int8Array array, for example, we can't get it directly through buffer.Int8Array. This is because ArrayBuffer cannot read and write directly through the subscript, we need to convert it to a typed array (TypedArray).

You cannot directly manipulate the contents of ArrayBuffer, but through typed array objects or DataView objects, which represent the data in the buffer in a specific format and read and write the contents of the buffer through these formats.

Const myTypedArray = new Uint8Array (buffer)

After the conversion, we can not only index the typed array by subscript, but also get its length. Of course, there is still a slight difference between TypedArray and ordinary Array, that is, if we use out-of-boundary index syntax to get array elements, TypedArray will not look in the prototype chain.

Now that we have the typed array, it's time to convert it to a normal string. Take a look at the String.fromCharCode function, which takes a sequence of code units and outputs a normal string. And the typed array we just got contains the code units.

Const str = String.fromCharCode (. MyTypedArray)

Here we use the extension operator. Unlock the code unit of the type array, transfer it all at once, and get a common string.

Finally, we need to use the method of a window object, the btoa method, which encodes a normal string into a string in base-64 format.

The above seems good, but in the last step, btoa, there is no such way to use it in Mini Program. You need to implement the btoa method yourself.

The realization of key Point btoa

Because this function has been implemented in browsers, it is more commonly used in Mini Program and node environments. So as a whole, the output of the method is carried out in module.exports and introduced in the form of require.

Output method

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

Import file

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

Base64.js

Var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/", a256 ='', R64 = [256], R256 = [256], I = 0 Var UTF8 = {/ * Encode multi-byte Unicode string into utf-8 multiple single-byte characters * (BMP / basic multilingual plane only) * * Chars in range Utility 0080-U+07FF are encoded in 2 chars Utt0800-U+FFFF in 3 chars * * @ param {String} strUni Unicode string to be encoded as UTF-8 * @ returns {String} encoded string * / encode: function (strUni) {/ / use regular expressions & String.replace callback function for better efficiency / / than procedural approaches var strUtf = strUni.replace (/ [\ u0080 -\ u07ff] / g, / / Utt0080-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, / / Uzz0800-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 utf-8 encoded string back into multi-byte Unicode characters * * @ param {String} strUtf UTF-8 string to be decoded back to Unicode * @ returns {String} decoded string * / 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) {const str = String.fromCharCode (. New Uint8Array (buffer)); return `data:image/jpeg;base64,$ {btoa (str)} `;}

The whole process is as follows:

Get an ArrayBuffer-> convert to a typed array to read normally (Uint8Array)-- > to a normal string (String.fromCharCode)-- > to a base64 string (btoa)

The above is all the content of this article "how to implement Mini Program wx.arrayBufferToBase64 method by js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.