Angular JS 生成动态二维码的方法


Posted in Javascript onFebruary 23, 2017

一、场景

二维码的场景,很多。这里是二维码一种小场景,比如分享一个链接,商品链接,项目链接,优惠券链接…

技术实现,如果用后端实现,需要构造输出一个图片流。或者后端生产二维码图片,给图片地址就好了。弊端,这个二维码就是一个链接,后端的文件 IO 操作,还得考虑存储。太费力。

如果前端实现,这样就很轻松了。这只是个分享二维码,分享出去给人家扫一扫。利用前端的 canvas,这里坐下调研。

jq 封装的 qrcode.js ,文章网上一大堆。

angular js :https://github.com/monospaced/angular-qrcode

二、使用

1.安装 angular-qrcode

git clone https://github.com/monospaced/angular-qrcode.git

cd angular-qrcode
npm install

2.引入 js 文件

<script src="/node_modules/qrcode-generator/js/qrcode.js"></script>
<script src="/node_modules/qrcode-generator/js/qrcode_UTF8.js"></script>
<script src="/node_modules/angular-qrcode/angular-qrcode.js"></script>

并在你 angular 配置中加入对这个模块的依赖:

angular
.module('your-module', [
'monospaced.qrcode',
]);

3.使用

在线案例:monospaced.github.io/angular-qrcode

使用元素:

<qrcode data="string"></qrcode>

具体配置参数:

<qrcode data="string" version="2" error-correction-level="Q" size="200" color="#fff" ba kground="#000"></qrcode>

作为可下载的图片:

<qrcode data="string" download></qrcode>

作为有链接的二维码:

<qrcode data="http://example.com" href="http://example.com" rel="external nofollow" ></qrcode>

download 和 href 互斥,不能同时使用。具体参数入下:

<qrcode version="{{version}}" error-correction-level="{{level}}" size="{{size}}" data="{{var}}" href="{{var}}" rel="external nofollow" color="{{color}}" background="{{background}}" download></qrcode>

以上所述是小编给大家介绍的Angular JS 生成动态二维码的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
js中!和!!的区别与用法
May 09 Javascript
js实现三角形粒子运动
Sep 22 Javascript
js实现楼层导航功能
Feb 23 #Javascript
jQuery点击头像上传并预览图片
Feb 23 #Javascript
jQuery事件与动画基础详解
Feb 23 #Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 #Javascript
解析Vue2.0双向绑定实现原理
Feb 23 #Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 #Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 #Javascript
You might like
具有时效性的php加密解密函数代码
2013/06/19 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
python实现的希尔排序算法实例
2015/07/01 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
大学生毕业求职简历的自我评价
2013/10/24 职场文书
矫正人员思想汇报
2014/01/08 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
开发房地产协议书
2014/09/14 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
借条如何写
2015/05/26 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python