图片转base64 验证码二维码前端渲染

小张张C

已于 2022-03-03 16:54:33 修改

阅读量902

点赞数

文章标签：前端 vue.js javascript

于 2022-02-09 11:02:00 首次发布

本文链接：https://blog.csdn.net/qq_43432157/article/details/122837460

版权

这篇博客介绍了如何在小程序中调用接口生成二维码，并在页面上显示。内容包括接口的定义，如请求URL、方法和响应类型，以及在前端如何处理返回的ArrayBuffer数据，将其转换为base64用于图片展示。同时提供了在uni-app平台上的转换方式。

摘要由CSDN通过智能技术生成

封装的接口文件

/**
	 * 获取小程序二维码
	 */
	qrCode: {
		def: {
			url: 'wx/qrcode',
			token: false,
			method: 'POST',
			baseURL: env.gatewaySso,
			responseType: 'arraybuffer',//重点
			returnData: false,
			tgplm: false
		},
		/**
		 * 调用api
		 * @param {object} {_body} 请求体
		 * @param {object} {_params} URL请求参数，URL后面?a=b&c=d部分内容
		 */
		call: function(_body = {}, _params = {}) {
			return caller.call(this.def, _body, _params);
		},
		/**
		 * 默认的异常处理方法
		 */
		doCatch: function(_exp) {
			caller.doCatch(_exp);
		}
	}, //getsession

引用接口文件

import wx from '../../../utils/api/sso/wx.js'

页面

<!-- 二维码 -->
<el-dialog :visible.sync="qrcode" :append-to-body="true">
	<div style="width: 430px;height: 430px;margin: auto;">
		<img :src="qrcodeIMG" style="margin: 0;padding: 0;width: 100%;height: 100%;">
	</div>
</el-dialog>

// 加载房间二维码
onqrCode() {
	wx.qrCode.call(null, {
		page: "packageA/pages/facilities/homeRoom",
		scene: "tenant=" + this.departmentid + "&room=" + this.menuID,
		check_path: false
	}).then(res => {
		return 'data:image/jpeg;base64,' + btoa(
			new Uint8Array(res.data)
			.reduce((data, byte) => data + String.fromCharCode(byte), '')
		);
	}).then(data => {
		this.qrcodeIMG = data;
		this.qrcode = true
	}).catch(wx.qrCode.doCatch)

},

//手机端uniapp转换方式
onShow() {
   apiWx.session_qrcode.call(req).then(_res => {
		let base64 = wx.arrayBufferToBase64(_res.data); //把arraybuffer转成base64
		this.todo = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
   }).catch(apiWx.session_qrcode.doCatch)
}