生成二维码的方法

JavaScript015

生成二维码的方法,第1张

1、如果是单纯要生成一张二维码的话,可以在网上搜索二维码生成器即可。

2、输入你想的信息,点击生成二维码即可,等待生成完成后即可下载你所需要的二维码了。

3、如果一个IT开发方面的,需要是前端开发,需要在js里面生成二维码的话,你可以参考一下网络的代码。

1、首先保存需要变成链接的二维码。保存到手机上或者电脑上。

2、其次打开浏览器,找到扫一扫,并打开。

3、最后找到相册,从相册找到保存的二维码,扫描之后,出现最上面的链接,就是需要的二维码链接。

一、需求背景

在 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')