• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Angular JS 生成动态二维码的方法

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

作者:泥瓦匠BYSocket 字体:[增加 减小] 来源:互联网 时间:2017-05-11

泥瓦匠BYSocket通过本文主要向大家介绍了js动态生成二维码,angular.js视频教程,angular.js,angular.js下载,angular js菜鸟教程等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一、场景

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

技术实现,如果用后端实现,需要构造输出一个图片流。或者后端生产二维码图片,给图片地址就好了。弊端,这个二维码就是一个链接,后端的文件 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
</div>

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>
</div>

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

angular
.module('your-module', [
'monospaced.qrcode',
]);
</div>

3.使用

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

使用元素:

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

具体配置参数:

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

作为可下载的图片:

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

作为有链接的二维码:

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

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

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-11如何用JS/HTML将时间戳转换为“xx天前”的形式
  • 2017-05-11js读取json文件片段中的数据实例
  • 2017-05-11jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
  • 2017-05-11js鼠标移动时禁止选中文字
  • 2017-05-11js实现适配不同的屏幕大小
  • 2017-08-26children和childNodes 的区别
  • 2017-05-11JavaScript的事件机制详解
  • 2017-08-02jquery 文件上传
  • 2017-05-11工厂模式在JS中的实践
  • 2017-05-11jQuery插件版本冲突的处理方法分析

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • COM组件中调用JavaScript函数详解及实例
    • JavaScript实现隐藏省略文字效果的方法
    • 详解Vue 事件驱动和依赖追踪
    • JS实现本地存储信息的方法(基于localStorage与userData)
    • js:return;return true;return false;区别
    • 纯JS单页面赛车游戏制作代码分享
    • 微信小程序实战之轮播图(3)
    • 浅析Angular2子模块以及异步加载
    • javascript实现滑动解锁功能
    • vue-hook-form使用详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有