解决qrcode生成的二维码微信长按不识别问题

问题描述

QRcode 生成二维码,展示到页面,微信打开,长按二维码没反应。而直接放二维码图片上去可以识别。

问题原因

手机兼容问题
qrcode在页面生成二维码时,会生成一个canvas标签和一个img标签。
在电脑浏览器上调试的时候,发现生成二维码之后canvas标签是会自动隐藏的,然后展示img标签,我们看到和识别的其实是图片。
在这里插入图片描述
本来那个canvas应该是隐藏的,不过部分安卓机里面,canvas元素没有隐藏掉,所以长按的时候按的不是图片,所以无法识别,也就没有弹窗,转成图片放到页面上去就行。

解决办法

手动将canvas隐藏,获取生成的链接拼到图片里面。
html页面:

<div id=
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Vue中使用qrcode生成二维码,你可以按照以下步骤进行操作: 1. 首先,你需要安装qrcode插件,你可以使用npm命令来安装:npm i qrcode -S 。 2. 然后,在你的Vue组件中引入qrcode插件:import QRCode from 'qrcode' 。 3. 接下来,在你的Vue组件的template中添加一个img标签,用于显示生成的二维码图片。例如: ``` <template> <div> <img :src="QRImgUrl" /> </div> </template> ``` 4. 在Vue组件的script中,使用QRCode生成二维码的方法。首先,你需要定义一个data属性QRImgUrl用于存储生成的二维码图片的URL。然后,在created钩子函数中调用getQRcode方法来生成二维码。getQRcode方法使用QRCode.toDataURL来生成二维码图片的DataURL,并将生成的URL赋值给QRImgUrl。例如: ``` <script> import QRCode from 'qrcode' export default { data() { return { QRImgUrl: '', QRlink:'www.xxx.com' } }, created() { this.getQRcode() }, methods: { getQRcode(){ QRCode.toDataURL(this.QRlink, { errorCorrectionLevel: 'L', margin: 2, width: 128 }, (err, url) => { if (err) throw err this.QRImgUrl = url }) } } } </script> ``` 这样,当你的Vue组件被创建时,getQRcode方法会被调用,生成二维码并将URL赋值给QRImgUrl,从而显示在页面上 。 如果你想对生成的二维码进行更详细的配置,你可以参考以下步骤: 1. 在getQRcode方法中定义一个opts对象,用于配置生成二维码的各种参数,比如容错级别、二维码类型、二维码质量、留白边距等 。 2. 修改QRCode.toDataURL方法的第二个参数为opts,这样可以根据opts的配置生成更加符合你需求的二维码 。 例如,你可以按照以下方式配置opts对象: ```javascript let opts = { errorCorrectionLevel: "L",//容错级别 type: "image/png",//生成的二维码类型 quality: 0.3,//二维码质量 margin: 5,//二维码留白边距 width: 128,//宽 height: 128,//高 text: "http://www.xxx.com",//二维码内容 color: { dark: "#666666",//前景色 light: "#fff"//背景色 } }; ``` 然后,将opts作为QRCode.toDataURL方法的第二个参数传入: ```javascript QRCode.toDataURL(this.QRlink, opts, (err, url) => { if (err) throw err this.QRImgUrl = url }) ``` 这样,你就可以根据opts的配置生成定制化的二维码 。 综上所述,你可以按照以上步骤在Vue中使用qrcode生成二维码,并根据需要进行详细的配置 。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值