在 VUE 开发的微信公众号项目中,有一个动态生成二维码的需求:根据后端传来的参数,动态生成二维码,用户长按动态生成的二维码,然后识别做相应操作。
二、BUG问题
二维码的生成采用的是第三方库 qrcodejs2,功能实现后,测试发现,在苹果 IOS 系统中长按可以正常识别,而在安卓手机长按则无法识别。
三、原因分析
第三方库 qrcodejs2 生成二维码时,它会在我们指定 div 盒子内动态生成两个元素,分别是 canvas 和 img,如下图所示:
浏览器代码截图
上图是在浏览器测试时的截图,可以看到 canvas 处于隐藏(display: none)状态,img 处于显示(display: block)状态。这种状态是没问题的,因为只有长按 img 图片才会弹出识别按钮,既然安卓手机长按无法弹出识别按钮,说明安卓手机展示的不是 img 元素,而是 canvas 元素。
四、解决方案
既然只有 img 元素才可以被识别,那么我们只要保证不让其展示 canvas 画布,始终展示 img 就可以了。具体代码如下:
<!-- 隐藏原来存放二维码的 div -->
<div id="qrcode" style="display: none"></div>
<!-- 添加一个新的div,用来展示 canvas 转换的 base64 图片 -->
<div style="text-align: center">
<img :src="qrcodeimg" alt="" width="200" height="200" v-show="qrcodeimg">
</div>
我们在指定的 div#qrcode 下面,再创建了一个div,并把原来装二维码的 div#qrcode 进行隐藏,然后生成二维码之后,我们获取 div#qrcode 里的 canvas 元素,并将拿到的 canvas 转为 base64 图片,然后展示在下面新创建的 div 中。这样处理之后,不管什么情况,始终展示的都是 img 图片了…
// 生成二维码
new QRCode("qrcode", {
width: 200,
height: 200,
text: this.payCode
})
// 生成二维码之后,获取canvas元素
let qrcodeEle = document.getElementById("qrcode")
let cvs = qrcodeEle.querySelector('canvas')
this.qrcodeimg = cvs.toDataURL('image/png')
:首先下载jquery.qrcode插件 新建一个包括了jquery和jquery.qrcode的页面 调用qrcode插件 $('#qrcode').qrcode("http://www.baidu.com")//任意字符串 浏览器中时如下结果,默认情况下qrcode生成的是canvas图片,这样效率高<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" />
<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<style>
body {
font-size: 14px
}
#body div {
margin-top: 4rem
}
.clearfloat {
zoom: 1
}
#cover {
position: absolute
left: 0px
top: 0px
background: rgba(0, 0, 0, 0.8)
width: 100%/*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
height: 100%
filter: alpha(opacity=100)/*设置透明度为60%*/
opacity: 1/*非IE浏览器下设置透明度为60%*/
display: none
z-Index: 999
}
</style>
</head>
<body>
<div id="qrcode"></div>
<script type="text/javascript">
var str = "hellow"
jQuery('#qrcode').qrcode({width: 64,height: 64,text: str})//这里可以设置大小~~
</script>
</body>
</html>