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

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

相关文章
|
10天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
10天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
10天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
16天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
16天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
15天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
15天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
16天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
16天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。