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 相关文章推荐
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
layui表格数据复选框回显设置方法
Sep 13 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
vue实现分页加载效果
Dec 24 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python os模块简单应用示例
2019/05/23 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
学校食堂食品安全责任书
2014/07/28 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
银行授权委托书范本
2014/10/04 职场文书
处级干部考察材料
2014/12/24 职场文书
汽车销售合同文本
2019/08/08 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
MSSQL基本语法操作
2022/04/11 SQL Server