微信小程序预览base64图片

起因：微信小程序下载图片，请求后台返回一堆乱码的字符

解决办法

1、请求部分加上 responseType: ‘arraybuffer’

2、由于微信官方不再维护wx.arrayBufferToBase64(arrayBuffer) API，为求可靠性自己实现arraybuffer转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 U+0080 - U+07FF are encoded in 2 chars, U+0800 - 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 approachesvar strUtf = strUni.replace(/[\u0080-\u07ff]/g, // U+0080 - U+07FF => 2 bytes 110yyyyy, 10zzzzzzfunction (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, 10zzzzzzfunction (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 charsfunction (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 charsfunction (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
}

3、使用

js

// 头部引入
const { btoa } =  require('../../utils/base64.js')//调用方法将arraybuffer转为base64
this.setData({base64Img: btoa(String.fromCharCode(...new Uint8Array(res.data))),
})

wxml

<image src="data:image/png;base64,{{base64Img}}" catch:tap="onPressImage" />

微信小程序预览base64图片相关推荐

微信小程序预览服务器图片,微信小程序实现图片选择并预览功能
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textar ...
微信小程序预览无法播放视频
微信小程序预览无法播放视频,但是用开发工具可以播放,真机调试也可以播放,是因为勾选了"不校验合法域名.web-view(业务域名).TLS 版本以及 HTTPS 证书"吗?
微信小程序预览 word、excel、ppt、pdf 等文件
目录微信小程序预览 word.excel.ppt.pdf 等文件预览效果前言注意点实现代码微信小程序预览 word.excel.ppt.pdf 等文件预览效果前言微信官方提供了相关的 ...
【预览pdf】:uniapp在微信小程序预览pdf，兼容安卓/IOS
前言提示:因最近项目需求,项目需要用uniapp来开发微信小程序预览pdf的功能, 后端以链接形式返回pdf地址. 一.方法概述开始用uniapp提供微信自带方法:wx.downloadFile( ...
实现微信小程序预览文件，预览页面添加倒计时
项目场景: 提示:1.实现小程序预览doc.docx.xls.xlsx.ppt.pptx.pdf类型文件 2.进入页面展示文件内容.开始按钮,点击,按钮变为[(**s)]倒计时 3.倒计时结束后,此按 ...
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；
uni-app小程序图片使用有image标签和background-image背景图两种方式: 下有获取本地图片的网络地址方式:见第四步一.方式一:使用image标签引入: uni-app官方ima ...
微信小程序-预览图片识别二维码
wx.getImageInfo(Object object) 获取图片信息.网络图片需先配置download域名才能生效. 测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/ ...
【微信小程序】将base64图片保存至本地
需求描述微信小程序中,下载一个报告文件,直接可获取到的是报告图片的base64格式. 参考文章 1.微信小程序实现图片下载功能 2.微信小程序把base64的图片保存到手机相册代码实现 1.wxm ...
微信小程序预览常见问题未找到app.json这个怎么解决
第一步.查看项目中文件,确实没有app.json 文件那说明HbuilderX在编译之后会自己生成 app.json.因为此文件是微信小程序的标配入口文件. 所以开始找一下HbuilderX在编译 ...

微信小程序预览base64图片

解决办法

1、请求部分加上 responseType: ‘arraybuffer’

2、由于微信官方不再维护wx.arrayBufferToBase64(arrayBuffer) API，为求可靠性自己实现arraybuffer转base64的方法，如下命名为base64.js

3、使用

js

wxml

微信小程序预览base64图片相关推荐

最新文章

热门文章