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

简介: 二维码的应用在现在生活和项目中应用的越来越多,下面就对二维码的生成及使用做一下总结。一、二维码的生成qrcode.js及jquery-qrcode.js实现生成二维码:qrcode.

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

一、二维码的生成

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的编码格式描述图片信息。

img_eb7ad605688602625c2232c3d276df22.png

生成二维码效果图

img_d5316c97906dd4b788dc7c601ae68d60.png

html代码

img_031743c19b95346e1692e264a163e14c.png

js代码

img_b0bbb74df96d47dcac79732cc632fc9b.png

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

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

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

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

img_12167c61e8018da486a1bbd15095bc0f.png

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

img_f70adf8abf13e20e5802ba169f927ae7.png

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


img_ed03beb2422eab88ae4dcfc0651d0aeb.png

三、qrcode在vue项目中的使用

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

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

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

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

img_00b3c73d296b7c16f9640f0559184c4f.png

点击下载二维码

img_dabee307b73a5dd6516f3df04d9d2344.png

四、长按二维码跳转页面

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

img_b2d005444b42552e8121600398373c22.png

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

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

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

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

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

未解码

img_fd9db5c6f7bb191bdaa32161dd16101d.png

解码后

img_13d04809e07829d3c09c1480f79cd139.png

使用decodeURIComponent解码

img_791ca2bc08a9c8ca186876a8141a00fc.png

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

img_140b9a470d3447f3f0d9eefb04b8c3d6.png

转化代码

img_7f27c7b4787c5012c0d461796288cdc8.png

效果图

img_e93c970b145b7f50ff5ca77474d88895.png

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

代码实现

img_e5c394b0c3318ee6e49584d822fe8a81.png

效果

img_2c4cdcf5f9b8754f76f4c5446d452d2a.png

关于二维码的git地址:git@github.com:wangAlisa/qrcode.git

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

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

相关文章
|
7天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
7天前
|
JavaScript
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
|
7天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
7天前
|
移动开发 JavaScript 前端开发
Vue Router的介绍与引入
Vue Router的介绍与引入
|
7天前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
|
7天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex
|
7天前
|
缓存 JavaScript
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
|
7天前
|
JavaScript API
vue 模板引用
vue 模板引用
|
7天前
|
JavaScript Go
Vue路由跳转及路由传参
Vue路由跳转及路由传参
|
8天前
|
JavaScript 前端开发 BI
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
开发环境 技术架构:前后端分离 开发语言:C#.net6.0 开发工具:vs2022,vscode 前端框架:Vue,Ant-Design 后端框架:百小僧开源框架 数 据 库:sqlserver2019
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院