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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
jQuery Ajax全解析
Feb 13 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
vue路由拦截器和请求拦截器知识点总结
Nov 08 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常用技巧总结(附函数代码)
2012/02/04 PHP
简单的php文件上传(实例)
2013/10/27 PHP
在PHP中使用redis
2013/11/04 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
python实现代码统计程序
2019/09/19 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
UML设计模式笔试题
2014/06/07 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
大学生自荐书范文
2013/12/10 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
模范班主任事迹材料
2014/12/17 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
Python编程super应用场景及示例解析
2021/10/05 Python
LeetCode189轮转数组python示例
2022/08/05 Python