微信小程序生成二维码乱码问题

文章讲述了在生成二维码过程中遇到的arrayBuffer乱码问题,介绍了如何通过设置responseType为arrayBuffer并在后端手动转化arrayBuffer为base64编码,以便在微信环境中的image标签正确展示。提到了弃用wx.arrayBufferToBase64方法并提供了自定义base64转换函数的示例。
摘要由CSDN通过智能技术生成

在生成二维码过程中返回的数据是乱码,如下图所示:

这份乱码是arrayBuffer,所以在wx.request请求的时候加入responseType:"arrayBuffer",在通过转化将arrayBuffer为base64编码,展示在图片上。

注意:将arrayBuffer为base64编码,原来是用wx.arrayBufferToBase64()这个方法,但现在已经被弃用了,所以需要自己写一个js文件手动转化一下。在utils文件夹中创建一个base64.js文件,然后复制以下代码到文件中

(function (a) {
  if ("object" == typeof exports && "undefined" != typeof module) module.exports = a();
  else if ("function" == typeof define && define.amd) define([], a);
  else {
    var b;
    b = "undefined" == typeof window ? "undefined" == typeof global ? "undefined" == typeof self ? this : self : global : window, b.base64js = a()
  }
})(function () {
  return function () {
    function b(d, e, g) {
      function a(j, i) {
        if (!e[j]) {
          if (!d[j]) {
            var f = "function" == typeof require && require;
            if (!i && f) return f(j, !0);
            if (h) return h(j, !0);
            var c = new Error("Cannot find module '" + j + "'");
            throw c.code = "MODULE_NOT_FOUND", c
          }
          var k = e[j] = {
            exports: {}
          };
          d[j][0].call(k.exports, function (b) {
            var c = d[j][1][b];
            return a(c || b)
          }, k, k.exports, b, d, e, g)
        }
        return e[j].exports
      }
      for (var h = "function" == typeof require && require, c = 0; c < g.length; c++) a(g[c]);
      return a
    }
    return b
  }()({
    "/": [function (a, b, c) {
      'use strict';

      function d(a) {
        var b = a.length;
        if (0 < b % 4) throw new Error("Invalid string. Length must be a multiple of 4");
        var c = a.indexOf("="); - 1 === c && (c = b);
        var d = c === b ? 0 : 4 - c % 4;
        return [c, d]
      }

      function e(a, b, c) {
        return 3 * (b + c) / 4 - c
      }

      function f(a) {
        var b, c, f = d(a),
          g = f[0],
          h = f[1],
          j = new m(e(a, g, h)),
          k = 0,
          n = 0 < h ? g - 4 : g;
        for (c = 0; c < n; c += 4) b = l[a.charCodeAt(c)] << 18 | l[a.charCodeAt(c + 1)] << 12 | l[a.charCodeAt(c + 2)] << 6 | l[a.charCodeAt(c + 3)], j[k++] = 255 & b >> 16, j[k++] = 255 & b >> 8, j[k++] = 255 & b;
        return 2 === h && (b = l[a.charCodeAt(c)] << 2 | l[a.charCodeAt(c + 1)] >> 4, j[k++] = 255 & b), 1 === h && (b = l[a.charCodeAt(c)] << 10 | l[a.charCodeAt(c + 1)] << 4 | l[a.charCodeAt(c + 2)] >> 2, j[k++] = 255 & b >> 8, j[k++] = 255 & b), j
      }

      function g(a) {
        return k[63 & a >> 18] + k[63 & a >> 12] + k[63 & a >> 6] + k[63 & a]
      }

      function h(a, b, c) {
        for (var d, e = [], f = b; f < c; f += 3) d = (16711680 & a[f] << 16) + (65280 & a[f + 1] << 8) + (255 & a[f + 2]), e.push(g(d));
        return e.join("")
      }

      function j(a) {
        for (var b, c = a.length, d = c % 3, e = [], f = 16383, g = 0, j = c - d; g < j; g += f) e.push(h(a, g, g + f > j ? j : g + f));
        return 1 === d ? (b = a[c - 1], e.push(k[b >> 2] + k[63 & b << 4] + "==")) : 2 === d && (b = (a[c - 2] << 8) + a[c - 1], e.push(k[b >> 10] + k[63 & b >> 4] + k[63 & b << 2] + "=")), e.join("")
      }
      c.byteLength = function (a) {
        var b = d(a),
          c = b[0],
          e = b[1];
        return 3 * (c + e) / 4 - e
      }, c.toByteArray = f, c.fromByteArray = j;
      for (var k = [], l = [], m = "undefined" == typeof Uint8Array ? Array : Uint8Array, n = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/", o = 0, p = n.length; o < p; ++o) k[o] = n[o], l[n.charCodeAt(o)] = o;
      l[45] = 62, l[95] = 63
    }, {}]
  }, {}, [])("/")
});

在util.js文件中引入base64.js 

const base64 = require('base64.js');
function arrayBufferToBase64(arrayBuffer) {
  const uint8Array = new Uint8Array(arrayBuffer);
  const base64Data = base64.fromByteArray(uint8Array);
  return base64Data;
}
module.exports = {
  arrayBufferToBase64
}

在需要调用的地方引入就可以了

import util, { arrayBufferToBase64 } from '../../utils/util'

image如何展示base64文件 

       <image src="data:image/png;base64,{{imageurl}}" mode=""/>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值