uniapp 实现本地二维码 二维码中间增加图片不显示(显示白块)

使用 uni.getImageInfo({ }) 转化 将 图片地址转化成本地预览地址

javascript 复制代码
		initUrqCode(){
			// let logo = 'http://mujiachaoshi.kiss55.com/78aca7812fd801f8e6d4d4482af70d38'
			uni.getImageInfo({
			  src: this.user.photo,
			  success: (res) => {
					// 获取uQRCode实例
					var qr = new UQRCode();
					// 设置二维码内容
					qr.data = "1";
					// 设置二维码大小,必须与canvas设置的宽高一致
					qr.size = 200;
					
					qr.foregroundImageSrc = res.path;
					// qr.foregroundImageWidth = '50';
					// qr.foregroundImageHeight = '50';
					
					// qr.areaColor = 'rgba(255,255,255,0)';
					qr.areaColor = '#ffffff';
					// qr.foregroundImageBackgroundColor = '#eeffff';
					// qr.backgroundColor = 'rgba(0,0,0,0)'
					// qr.typeNumberBackgroundColor = 'rgba(0,0,0,0)'
					
					// 调用制作二维码方法
					qr.make();
					// 获取canvas上下文
					var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件,this必须传入
					// 设置uQRCode实例的canvas上下文
					qr.canvasContext = canvasContext;
					// 调用绘制方法将二维码图案绘制到canvas上
					qr.drawCanvas();
			  },
			  fail: (err) => {
			    console.log('图片加载失败', err);
			  }
			});
		},
相关推荐
智者知已应修善业21 分钟前
【输入两个数字,判断两数相乘是否等于各自逆序数相乘】2023-10-24
c语言·c++·经验分享·笔记·算法·1024程序员节
CoderYanger10 小时前
动态规划算法-子数组、子串系列(数组中连续的一段):21.乘积最大子数组
开发语言·算法·leetcode·职场和发展·动态规划·1024程序员节
CoderYanger10 小时前
A.每日一题——3432. 统计元素和差值为偶数的分区方案
java·数据结构·算法·leetcode·1024程序员节
CoderYanger12 小时前
动态规划算法-子数组、子串系列(数组中连续的一段):26.环绕字符串中唯一的子字符串
java·算法·leetcode·动态规划·1024程序员节
韩家阿杰2 天前
RabbitMQ技术的使用
1024程序员节
CoderYanger2 天前
动态规划算法-简单多状态dp问题:15.买卖股票的最佳时机含冷冻期
开发语言·算法·leetcode·动态规划·1024程序员节
CoderYanger2 天前
递归、搜索与回溯-FloodFill:33.太平洋大西洋水流问题
java·算法·leetcode·1024程序员节
CoderYanger2 天前
动态规划算法-斐波那契数列模型:2.三步问题
开发语言·算法·leetcode·面试·职场和发展·动态规划·1024程序员节
CoderYanger2 天前
动态规划算法-简单多状态dp问题:16.买卖股票的最佳时机含手续费
开发语言·算法·leetcode·动态规划·1024程序员节
CoderYanger2 天前
C.滑动窗口-求子数组个数-越短越合法——3258. 统计满足 K 约束的子字符串数量 I
java·开发语言·算法·leetcode·1024程序员节