二维码生成和长按跳转页面及扫码预览页面及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中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
87 2
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
525 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
2月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
100 0
|
2月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
231 1
|
3月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
361 17
|
3月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
204 1
|
5月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
741 4
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
531 77
|
5月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍