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);
			  }
			});
		},
相关推荐
comyccccc29 分钟前
STM32F103C8T6最小系统板设计全解析学习笔记
单片机·1024程序员节
叼烟扛炮4 小时前
Linux 学习笔记(三十三):线程互斥——互斥锁(Mutex)与死锁
linux·运维·服务器·笔记·学习·1024程序员节
云和数据.ChenGuang5 小时前
Python 常见特殊方法详解:__new__、__init__、__del__、__str__、__repr__ 与 __getattribute__
开发语言·人工智能·python·1024程序员节
海宇服务5 小时前
零信任架构实战:基于海宇全国车辆配置查验构建自动化二手商用车出厂参数建档网关
运维·人工智能·架构·自动化·1024程序员节
zhippt_10146 小时前
AI生成PPT工具推荐:图转PPT与一键生成实测对比
人工智能·1024程序员节
鬼手点金7 小时前
KV Cache 未必是一次性的:可编辑、可组合的“笔记”
java·人工智能·笔记·学习·自动化·1024程序员节
深圳光特通信豆子7 小时前
使用光特通信光模块构建核心-分布-接入三层园区网络
1024程序员节
喜欢猪猪8 小时前
把记忆搬出显存:DeepSeek-V4.1-Flash Engram 与“第二稀疏轴“的架构革命
1024程序员节
4SAPI9 小时前
多模态 AI 应用统一接入网关生产选型指南:4SAPI、硅基流动与 OpenRouter 的架构权衡
大数据·人工智能·架构·php·1024程序员节
程序猿乐锅13 小时前
面向对象练习:图书借阅系统里的封装、抽象类与多态
开发语言·前端·数据库·后端·python·学习·1024程序员节