QRCode.js使用规范
1.引用
import qrcode from qrcodejs
2.定义标签
<div id="qrcode"></div>
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
})
⚠️ 注意
1.如果text内容不是linkurl链接,返回的是base64,只需要对base64进行处理,在img标签src属性中使用即可;
let base64Str = `data:image/jpeg;base64,${base64}`
this.base64Str = base64Str
<img :src="base64Str">
2.url的中文编码问题
如果传的是url,但是打开的时候只是一堆字符串让手动复制,那么说明url的地址不正确。
如果是微信,传的url的地址中有中文是可以识别的,但是在QQ中是不行的
所以其中的中文要进行encodeURIComponent编码,但是不要整体都编码,只是中文的部分编码即可。
3.长字符串的现实模糊问题
问题分析:
显示模糊的问题,应该是canvas的问题。由于字符串比较长,尤其是需要传一个连接地址,后面还加一些参数的时候,就会加大二维码的像素复杂度,而本身canvas在绘制的时候,就一直有像素模糊的问题,尤其是在手机上的时候。