开发者社区> 廊桥梦醉> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

二维码生成和长按跳转页面及扫码预览页面及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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue如何刷新当前页面?我是这样做的,你呢?
Vue如何刷新当前页面?我是这样做的,你呢?
0 0
Vue改变数组值,页面视图为何不刷新?
Vue改变数组值,页面视图为何不刷新?
0 0
vue element-ui分页插件 始终保持在页面底部样式
vue element-ui分页插件 始终保持在页面底部样式
0 0
Vue h5页面一直抖动问题
Vue h5页面一直抖动问题
0 0
vue项目中页面进入退出设置动画
vue项目中页面进入退出设置动画
0 0
vue项目设置页面标题
vue项目设置页面标题
0 0
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
0 0
Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载,解决数据量过多时 页面卡顿、体验差的问题
Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载,解决数据量过多时 页面卡顿、体验差的问题
0 0
Vue主页面功能详情
Vue主页面功能详情
0 0
+关注
廊桥梦醉
对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来不是我的动机,好奇才是。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于VUE的单页面性能优化实践
立即下载
利用编译将 Vue 组件转成 React 组件
立即下载
yqdh_58c128c6555...1510401796.pdf
立即下载