前端QRCode.js生成二维码

QRCode.js使用规范

1.引用 

    import qrcode from qrcodejs

2.定义标签

    

3.调用

简单调用：

     new QRCode(document.getElementById('qrcode'),'you content')

设置参数调用：

    let qrcode = new QRCode('qrcode',{ //qrcode， 承载二维码的DOM元素ID；{}参数设置

        text:`${this.linkUrl}id=7`,

        width:200,   

        height:200,

        colorDark:'#000000',

        colorLight:'#ffffff',

        correctLevel: QRCode.CorrectLevel.H

    })

option 参数

⚠️ 注意

1.如果text内容不是linkurl链接，返回的是base64，只需要对base64进行处理，在img标签src属性中使用即可；

    let base64Str = `data:image/jpeg;base64,${base64}`

    this.base64Str = base64Str

    

2.url的中文编码问题

如果传的是url，但是打开的时候只是一堆字符串让手动复制，那么说明url的地址不正确。

如果是微信，传的url的地址中有中文是可以识别的，但是在QQ中是不行的

所以其中的中文要进行encodeURIComponent编码，但是不要整体都编码，只是中文的部分编码即可。

3.长字符串的现实模糊问题

问题分析：

    显示模糊的问题，应该是canvas的问题。由于字符串比较长，尤其是需要传一个连接地址，后面还加一些参数的时候，就会加大二维码的像素复杂度，而本身canvas在绘制的时候，就一直有像素模糊的问题，尤其是在手机上的时候。