脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularjs 生成二维码

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

 更新时间：2017年02月23日 09:48:14   作者：泥瓦匠BYSocket  
这篇文章主要介绍了Angular JS 生成动态二维码的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下

一、场景

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

技术实现，如果用后端实现，需要构造输出一个图片流。或者后端生产二维码图片，给图片地址就好了。弊端，这个二维码就是一个链接，后端的文件 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 生成动态二维码的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Angular.Js中ng-include指令的使用与实现

    Angular.Js中ng-include指令的使用与实现

    ng-include 指令用于包含外部的 HTML 文件。包含的内容将作为指定元素的子节点。下面这篇文章主要给大家介绍了Angular.Js中ng-include指令的使用与实现的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。
    2017-05-05
  • 对比分析AngularJS中的$http.post与jQuery.post的区别

    对比分析AngularJS中的$http.post与jQuery.post的区别

    这篇文章主要给大家对比分析AngularJS中的$http.post与jQuery.post的区别，十分的详细，是篇非常不错的文章，这里推荐给小伙伴们。
    2015-02-02
  • angular父子组件通信详解

    angular父子组件通信详解

    这篇文章主要为大家介绍了angular父子组件通信，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • angular 表单验证器验证的同时限制输入的实现

    angular 表单验证器验证的同时限制输入的实现

    表单验证是经常用到一个东西，这篇文章主要介绍了angular 表单验证器验证的同时限制输入的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-04-04
  • Angular7.2.7路由使用初体验

    Angular7.2.7路由使用初体验

    这篇文章主要介绍了Angular7.2.7路由使用初体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • AngularJS基础 ng-keyup 指令简单示例

    AngularJS基础 ng-keyup 指令简单示例

    本文主要介绍AngularJS ng-keyup 指令,这里对ng-keyup指令的基本资料进行了整理,并且附有代码示例,有需要的朋友可以看一下
    2016-08-08
  • AngularJs表单校验功能实例代码

    AngularJs表单校验功能实例代码

    这篇文章主要介绍了AngularJs表单校验功能实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • Angular表格神器ui-grid应用详解

    Angular表格神器ui-grid应用详解

    这篇文章主要为大家详细介绍了Angular表格神器ui-grid应用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09
  • AngularJS内置指令

    AngularJS内置指令

    这篇文章主要详细介绍了AngularJS内置指令的使用方法，非常详细，常用的一些指令操作都做了总结，有需要的小伙伴参考下
    2015-02-02
  • 详解如何在Angular应用中发起HTTP 302 redirect

    详解如何在Angular应用中发起HTTP 302 redirect

    这篇文章主要介绍了如何在Angular应用中发起HTTP 302 redirect详解，有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12

最新评论