二维码生成和长按跳转页面及扫码预览页面及vue中的使用

二维码的应用在现在生活和项目中应用的越来越多，下面就对二维码的生成及使用做一下总结。

一、二维码的生成

qrcode.js及jquery-qrcode.js实现生成二维码：

qrcode.js github地址： qrcode   

jquery-qrcode.js github地址： jquery-qrcode

qrcode.js和query-qrcode.js的区别是：qrcode.js可以指定生成的二维码深色、浅色区域块的颜色，jquery-qrcode.js只能默认黑白两色

qrcode.js支持clear()和makeCode()方法，用于便捷清空二维码、更换二维码，jquery-qrcode.js不支持

下面主要说qrcode.js

qrcode.js生成二维码的原理：qrcode.js在用于生成二维码的容器#qrcode内生成一个canvas标签和一个img标签，并且以base64的编码格式描述图片信息。

生成二维码效果图

html代码

js代码

点击按钮生成的二维码保存到本地

实现原理：将base64编码格式的图片转换成canvas画布，利用toDataUrl()方法将canvas画布信息转化为可供下载的url信息 toDataUrl()，构建下载链接并模拟点击，将图片下载到本机

二、基于qrcode.js案例demo实现将生成的二维码保存为本地图片

1、构建一个用于下载的空a标签

将base64图片构建成画布并模拟点击a标签下载

当我们在列表中使用二维码的时候，需要先清空上一个二维码再生成一个新的二维码，此时就需要用到qrcode的api,qrcode.clear()或者qrcode.makeCode(new url)

三、qrcode在vue项目中的使用

vue使用qrcode，canvas生成二维码图片，并下载

1、npm install qrcode --save-dev   //安装qrcode包

2、import qrcode from 'qrcode'     //在main.js中引用

3、组件中使用并生成二维码

点击下载二维码

四、长按二维码跳转页面

只需要判断是长按还是点击事件即可，然后在判断是长按之后跳转页面

另外一篇文章我写的是：判断长按还是点击事件，可以根据是长按还是点击事件来做识别二维码的功能 https://www.jianshu.com/writer#/notebooks/20757449/notes/22099207

五、判断是用什么设备扫描的二维码

我写过一篇关于navigator userAgent的文章，可以通过判断navigator userAgent的值来判断扫描二维码的设备的浏览器信息。https://www.jianshu.com/writer#/notebooks/20757449/notes/29059431

六、二维码的信息内容存在中文

我们实验的时候发现不能识别中文内容的二维码，如果有中文内容，如果在二维码的内容页面有需求使用二维码内容中的中文信息，则需要对该值进行解码。

未解码

解码后

使用decodeURIComponent解码

七、为了隐去鼠标悬浮在二维码上边的时候显示二维码内容，需要将生成的二维码转成base64格式的图片

转化代码

效果图

八、在当前的图片上添加文字或logo处理

代码实现

效果

关于二维码的git地址：[email protected]:wangAlisa/qrcode.git

参考文档:https://blog.csdn.net/u011127019/article/details/51226104

大家如果有什么好的建议或者意见，请多多指教！