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);
			  }
			});
		},
相关推荐
xsd202411182 小时前
RelateAnything:53M小模型如何把视觉关系检测从50个谓词里解放出来
人工智能·1024程序员节
Brilliantwxx5 小时前
【STM32】 内部 Flash 详解:寄存器逐位拆解 + 工作流程顺序全讲 + EEPROM再实现
stm32·单片机·嵌入式硬件·1024程序员节
一只鹿鹿鹿6 小时前
智算算力、AI-芯片与产品解析(PPT文件)
大数据·运维·网络·人工智能·物联网·1024程序员节
xwz小王子6 小时前
Science Advances 让机器人触觉在重压下继续分辨微小变化
机器人·1024程序员节
小小AK6 小时前
聚水潭售后单到金蝶退货单同步实战:从增量拉取到目标单据落库的全流程拆解
1024程序员节
Ai-_Man12 小时前
Coze扣子还是不可以导出左侧所有对话,只能点进去单条内容导出,方法不对吗?
开发语言·人工智能·ai·小程序·1024程序员节
Android系统攻城狮13 小时前
Linux FFmpeg深度解析之av_dump_format调用流程与实战(十一)
linux·运维·服务器·ffmpeg·1024程序员节·音视频进阶
Android系统攻城狮13 小时前
Linux FFmpeg深度解析之avcodec_find_decoder调用流程与实战(十二)
linux·运维·服务器·ffmpeg·1024程序员节·音视频进阶
1-1=013 小时前
.NET Core 文件系统
.net·.netcore·1024程序员节