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);
			  }
			});
		},
相关推荐
AI人工智能+电脑小能手14 分钟前
一次请求打几个下游,这个Java并行任务工具类6个方法按序聚合
java·线程池·并发编程·1024程序员节·批量处理·并行任务
CarIise20 分钟前
JavaWeb 文件上传的四种实现方案
1024程序员节
长欢喜一场25 分钟前
豆包:字节跳动AI助手的全方位透视
人工智能·搜索引擎·1024程序员节
4SAPI25 分钟前
搭建 AI 数据分析工具大模型 API 选型指南
数据库·人工智能·架构·php·1024程序员节
KingOTC28 分钟前
国产模块测评:基于国产芯片的实际表现
rfid·1024程序员节
小嘉丶学长33 分钟前
Day04 · 程序入门
1024程序员节
Alsn8640 分钟前
Windows 安装 Ollama 及本地模型部署
学习·1024程序员节
霂鳯42 分钟前
新手勇闯网络安全 | MySQL基础(二)
1024程序员节
俊哥V44 分钟前
每日 AI 研究简报 · 2026-10-24
人工智能·ai·1024程序员节
burg_xun1 小时前
【生命科学 Agent】推理平台(三)
人工智能·系统架构·1024程序员节