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 生成动态二维码的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Android中google Zxing实现二维码与条形码扫描

    Android中google Zxing实现二维码与条形码扫描

    Android中google Zxing实现二维码与条形码扫描 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一张图片中扫一下竟然能直接加好友,不可思议啊,那时候还不了解二维码,呵呵,然后做项目的时候,老板说要加上二维码扫描功能,然后自己的屁颠屁颠的去百度,google啥的,发现很多朋友都有介绍二维码扫描的功能,然后我就跟着人家的介绍自己搞起了二维码扫描功能,跟着人家的帖子,很快我的项目就加入了扫描二维码的功能,然后自己还很开心. 随着微信的到来,二维码越来越火

  • JavaScript纯色二维码变成彩色二维码

    JavaScript纯色二维码变成彩色二维码

    本文章主要讨论的是如何将一个纯色二维码变成彩色的. 前段时间公司业务上有这么一个需求,客户不喜欢后台生成的纯色二维码,纯蓝,纯紫,纯绿都不行,想要彩色二维码.然后这个任务都落到我头上了,因为是图片处理,那主要思路就是靠canvas,canvas可以进行像素操作,所以我进行了一些尝试,也踩了一点小坑,具体记录如下. 前置知识 drawImage方法可以把图片画到canvas上,getImageData方法可以获得一个矩形区域所有像素点的信息,返回值的data属性是一个一维数组,储存了所有像素点的信

  • Android二维码创建实例

    Android二维码创建实例

    Android二维码之创建 实现效果图: 1.Android 有自带的jar包可以生成二维码core-3.0.0.jar,其中的com.google.zxing包 2.写一个二维码生成的工具类,网上搜的话应该一大堆. 实例代码: package com.example.administrator.twocodedemo; import android.content.Context; import android.graphics.Bitmap; import android.graphics.

  • 详解使用zxing库生成QR-Code二维码

    详解使用zxing库生成QR-Code二维码

    详解使用zxing库生成QR-Code二维码 最近因为一些工作需要,需要根据实际的信息生成QR-Code二维码图片文件,自然想到zxing库了,具体的代码很简单,做个备忘. 首先是引入zxing库,我是使用maven构建项目的,添加依赖: <dependency> <groupId>com.google.zxing</groupId> <artifactId>javase</artifactId> <version>3.3.0<

  • 微信小程序 PHP生成带参数二维码

    微信小程序 PHP生成带参数二维码

    微信小程序 PHP生成带参数二维码 官方获取小程序页面API 由于小程序参数二维码API提供的帮助有限,以下是我对该功能的一些理解 我主要是通过thinkphp后台接口实现,代码如下: 1.先获取ACCESS_TOKEN: $tokenUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$this->appid."&secret=".

  • iOS 二维码扫描和应用跳转

    iOS 二维码扫描和应用跳转

    前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如ZXing或者ZBar.使用时集成麻烦,出错也不方便调试.在iOS7之后,苹果自身提供了二维码的扫描功能,从效率上来说,原生的二维码远高于这些第三方框架.本文讲解如何使用原生框架实现二维码扫描功能,并且进行扫描后的项目跳转. 扫描相关类 二维码扫描需要获取摄像头并读取照片信息,因此我们需要导入系统的AVFoundation框架,创建视频会话.我

  • nodejs获取微信小程序带参数二维码实现代码

    nodejs获取微信小程序带参数二维码实现代码 由于项目需求,需要获取小程序页面的带有参数的二维码.好,那就看文档搞吧. 之前都是写前端,没有写过后台的东西,这次难得有机会组长让我试一试试用node来写,那就写吧. 1.首页获取token,发送request请求,用get的方式,在url后面加上小程序的grant_type,appid,secret,就顺利拿到token了,注意,这个token是有有效时间的,小程序的是7200秒,也就是2个小时,每天获取的次数有限,需要有个中控服务器定时获取to

  • Android基于zxing的二维码（网格）扫描 仿支付宝网格扫描

    Android基于zxing的二维码（网格）扫描 仿支付宝网格扫描

    前言:对于二维码扫描我们使用的是开源框架Zxing或者Zbar,这里使用基于zxing的二维码扫描,类似支付宝网格扫描. 二维码原理介绍: 二维码是用某种特定的几何图形按一定的规律在平面上分布的黑白相间的图形记录数据符号信息的,在代码编制上巧妙的利用构成计算机内部逻辑基础的0/1比特流的概念,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图像输入设备或光电扫描设备自动识读以实现信息自动处理:二维码能够在横向和纵向两个方位同时表达信息,因此能在很小的面积内表达大量的信息. 效果: 真机

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

    一.场景 二维码的场景,很多.这里是二维码一种小场景,比如分享一个链接,商品链接,项目链接,优惠券链接- 技术实现,如果用后端实现,需要构造输出一个图片流.或者后端生产二维码图片,给图片地址就好了.弊端,这个二维码就是一个链接,后端的文件 IO 操作,还得考虑存储.太费力. 如果前端实现,这样就很轻松了.这只是个分享二维码,分享出去给人家扫一扫.利用前端的 canvas,这里坐下调研. jq 封装的 qrcode.js ,文章网上一大堆. angular js :https://github.c

  • three.js 制作动态二维码的示例代码

    今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦! 1. 解析图片流 canvas = document.createElement('canvas');//创建canvas画布 content = canvas.getContext('2d');//获取画布的上下文 canvas.width = 310;//设置尺寸 canvas.height = 310; img = new Image();//创建一张图片 img.src

  • PHP QRCODE生成彩色二维码的方法

    本文实例讲述了PHP QRCODE生成彩色二维码的方法.分享给大家供大家参考,具体如下: 这里重写了下PHPQRCODE,精简了部分代码,合并PNG GIF JPEG的输出. 参数说明: 调用方式: 复制代码 代码如下: QRcode::IMGout($text, $outfile = false, $level = QR_ECLEVEL_L, $size = 3, $col=array(array(255,255,255),array(0,0,0)),$margin =2, $saveandp

  • 用python生成(动态彩色)二维码的方法(使用myqr库实现)

    最近真的感觉到了python生态的强大(倒吸一口凉气) 现在介绍一个可以生成动态二维码的库(myqr) 效果如图: 第一步要安装myqr库 在cmd中直接用pip安装 pip install myqr 第二步 from MyQR import myqr import os version, level, qr_name = myqr.run( words="https://www.baidu.com", # 可以是字符串,也可以是网址(前面要加http(s)://) version=1

  • 基于Python生成个性二维码过程详解

    一.问题描述 通过调用MyQR模块来实现生成个人所需二维码. 安装: pip install myqr 二.代码实现 1.普通二维码 from MyQR import myqr # 普通二维码 myqr.run( words='http://www.cnblogs.com/mayi0312', save_name='qrcode.png' ) 效果图: 2.带图片的艺术二维码 光是二维码,太单调了点.我们可以加上我们想要的图片,使二维码更具辨识度! 准备的Logo图片: 当然,也可以选择其他个人

  • php实现生成带二维码图片并强制下载功能

    本文主要和大家分享php生成带二维码图片并强制下载实现代码,希望能帮助到大家实现一个自己的二维码. /* 下载二维码 */ public function 测试(){ // 接收传递的参数 $data['keys'] = [ 'b01id'=>trim(I('get.b01id')), 'b02id'=>trim(I('get.b02id')), 'b03id'=>trim(I('get.b03id')), 'brid'=>trim(I('get.brid')), 'unicon'

  • 11行JS代码制作二维码生成功能

    HTML代码: <img style="display: none" id="qrcode" data-width="100" data-height="100" data-url="https://www.baidu.com/"> 相关JS代码: /** * 生成二维码 * data-width={宽度} * data-height={高度} * data-url={链接} * @param

  • vue中实现动态生成二维码的方法

    最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下: 1.引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置. 2.引入使用 import QRCode from 'qrcodejs2'; 备注:在main中设置全局可使用 Vue.prototype.qrCode 3.

  • js基于qrcode.js生成二维码的方法【附demo插件源码下载】

    本文实例讲述了js基于qrcode.js生成二维码的方法.分享给大家供大家参考,具体如下: 调用qrcode.js文件代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="js/qrcode.js"></script> <style> #qr

  • C#基于QRCode实现动态生成自定义二维码图片功能示例

    本文实例讲述了C#基于QRCode实现动态生成自定义二维码图片功能.分享给大家供大家参考,具体如下: 二维码早就传遍大江南北了,总以为它是个神奇的东西,其实细细研究之后发现也没想象的那么神秘,碰巧最近项目中需要动态生成二维码,解决完实际问题之后,简单总结整理一下.项目中除了动态生成二维码之外,还实现了动态生成自定义图片,二维码可以是其中的元素. 设置图片的数据源为动态图片 <body> <form id="form1" runat="server"

随机推荐