在微信同时使用QRCode与domtoimage插件时,domtoimage无法生成图片的问题

5 篇文章 0 订阅
4 篇文章 0 订阅
本文记录了在微信公众号中使用domtoimage插件生成图片失败的问题及解决方案。当从PC端转移到手机微信环境时,domtoimage无法正常工作。通过调整QRCode生成二维码后的代码,确保在删除二维码img标签后调用domtoimage转图片方法。同时,还解决了动态引入http外部链接图片在微信内报错的问题,通过添加crossorigin属性和特定字符串参数。
摘要由CSDN通过智能技术生成

最近踩得坑比较多,记录一下BUG出现过程
原因是公司要求在公众号展示出相关机构的报告,将页面转为图片并附带二维码,在pc端时候,QRCode与domtoimage并不会出现问题,但我将代码提交服务器,并用手机微信查看的时候,发现在微信公众号中domtoimage插件生成失败了。
解决思路与办法就是先使用QRcode生成二维码,生成二维码后,需要在二维码生成的方法后面加入下面的代码

var img = document.getElementById("twoCode").getElementsByTagName("img")[0]document.getElementById("twoCode").removeChild(img);
this.$nextTick(()=>{
					this.imgCreate();
				})

twoCode为二维码的id名,img则是为了删除标签,this.$nextTick方法里面是domtoimage转图片的方法,顺序不能乱
除了这里需要注意还需要修改QRCode源码中的代码,找到插件中qrcode.js文件

function _onMakeImage() {
			this._elImage.src = this._elCanvas.toDataURL("image/png");
			this._elImage.style.display = "block";
			this._elCanvas.style.display = "none";
		}

我这里显示是第 289行,找到这段代码将this._elCanvas.style.display = “none”;替换为block
到此为止大功告成!

还有另一种情况就是img图片的src动态引入http外部链接时报错的问题,这个需要在标签内添加 crossorigin="anonymous" ,在src的链接后面添加‘?any_string_is_ok’,这样就能在微信内正常使用domtoimage了
:附完整img

<img crossorigin="anonymous" :src="patient.hospitalLogo ? patient.hospitalLogo + '?any_string_is_ok':''" />
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值