You're never really done for, as long as you‘ve got a good story and someone to tell it to.

qrcodejs2生成二维码在安卓手机偏移问题

郭立 2020-12-23 02:29:51 65次浏览 0次留言

问题收集

问题

今天在做一个活动页面的时候，安卓设备上的二维码莫名其妙的偏移到下方，因为手机上不能查看元素，所以研究了好一会。

IOS上的效果

Android上的效果

原因

主要是因为在qrcode生成二维码的时候，会生成canvas和img标签。
然后在Android上使用canvas标签隐藏img而且没有设置src属性，在IOS上隐藏canvas标签使用img.
所以就产生了样式不兼容问题。

IOS的qrcode

Android的qrcode

解决方案

使用canvas还有导致长按无法识别二维码的问题，所以这里就直接强制使用img标签

	const device = navigator.userAgent;
	const isAndroid = ~device.indexOf("Android") || ~device.indexOf("Adr"); //android终端
	const imgEle = this.$refs.qrCode.lastChild;
	const canvas = this.$refs.qrCode.firstChild;
	if (isAndroid) {
          imgEle.src = canvas.toDataURL("image/png");
          canvas.style.display = "none";
          imgEle.style.display = "block";
        }

# qrcode qrcodejs2

支付宝捐赠