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 相关文章推荐
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
BootStrap数据表格实例代码
Sep 13 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
编写v-for循环的技巧汇总
Dec 01 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
js 内存释放问题
2010/04/25 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
vue中使用echarts的示例
2021/01/03 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
行政管理人员精品工作推荐信
2013/11/04 职场文书
应届生财务会计求职信
2013/11/05 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python