Angular生成二维码
Installation - Angular 5+, Ionic
NPM
npm install angularx-qrcode --save
Yarn
yarn add angularx-qrcode
Installation - Angular 4
NPM
npm install angularx-qrcode@1.0.2 --save
Yarn
yarn add angularx-qrcode@1.0.2
Basic Usage
Import the module and add it to your imports section in your main AppModule (file: app.module.ts)
// all your imports
import { QRCodeModule } from 'angularx-qrcode';
@NgModule({
declarations: [
AppComponent
],
imports: [
QRCodeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Examples
Generate a QR Code from a string (directive only)
Now that Angular/Ionic knows about our QR Code module, we can invoke it from our template with a directive. If we use a simple text-string, we need no additional code in our controller.
<qrcode [qrdata]="'Your QR code data string'" [size]="256" [level]="'M'"></qrcode>
Create a QR Code from a variable in your controller
In addition to our <qrcode>
-directive in example.html
, we add two lines of code to our controller example.ts
.
// example.ts:
export class QRCodeComponent {
public angularxQrCode: string = '';
// assign a value anywhere in/below your constructor
this.myAngularxQrCode = 'Your QR code data string';
}
// example.html:
<qrcode [qrdata]="myAngularxQrCode" [size]="256" [level]="'M'"></qrcode>
Parameters
Attribute | Type | Default | Description |
---|---|---|---|
allowEmptyString | Boolean | false | Allow empty string |
colorlight | String | '#ffffff' | Dark color |
colordark | String | '#000000' | Light Color |
level | String | 'M' | QR Correction level ('L', 'M', 'Q', 'H') |
qrdata | String | '' | String to encode |
size | Number | 256 | Height / Width (any value) |
usesvg | Boolean | false | SVG Output |
Note
Depending on the size (amoutn of data) of the qrdata to encode, a minimum size might be required.
git地址:https://github.com/Cordobo/angularx-qrcode
Angular生成二维码的更多相关文章
- 六、angular 生成二维码
首先需要安装angular-qrcode : bower install monospaced/angular-qrcode npm install angular-qrcode 如何使用? 在相应的 ...
- JavaScript的学习--生成二维码
有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 ...
- Javascript生成二维码(QR)
网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...
- 使用jquery.qrcode生成二维码(转)
jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...
- iOS 生成二维码
首先先下载生成二维码的支持文件 libqrencode 添加依赖库 CoreGraphics.framework. QuartzCore.framework.AVFoundation.framewor ...
- QR code 扩展生成二维码
include './phpqrcode/phpqrcode.php'; //引入QR库 QRcode::png("leo", 'qrcode.png', 'L', 10); ...
- Python 创建本地服务器环境生成二维码
一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...
- C#通过第三方组件生成二维码(QR Code)和条形码(Bar Code)
用C#如何生成二维码,我们可以通过现有的第三方dll直接来实现,下面列出几种不同的生成方法: 1):通过QrCodeNet(Gma.QrCodeNet.Encoding.dll)来实现 1.1):首先 ...
- 使用Spire.Barcode程序库生成二维码
使用Spire.Barcode程序库生成二维码 某天浏览网页发现了一个二维码的程序库.它的描述说他可以扫描二维码图像.我很感兴趣,想试试他是不是会有用.所以我就用了些方法扫描二维码图像来测试一下.结果 ...
随机推荐
- Oracle 中的一些重要V$ 动态性能视图,系统视图和表
v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter ...
- oracle批量插入数据(测试)
做数据库开发或管理的人经常要创建大量的测试数据,动不动就需要上万条,如果一条一条的录入,那会浪费大量的时间,本文介绍了Oracle中如何通过一条 SQL快速生成大量的测试数据的方法.产生测试数据的SQ ...
- [转]QT4.8.5+qt-vs-addin-1.1.11+VS2010安装配置和QT工程的新建和加载
1.下载windows下的QT库 QT4.8.5 for vs2010: http://download.qt-project.org/official_releases/qt/4.8/4.8.5/q ...
- js深度克隆对象
js深度克隆对象 js深度克隆对象简单的记录一下,如下代码: var obj = { typeOf: function(obj) { const toString = Object.prototype ...
- 2018AVA: A Video Dataset of Spatio-temporally Localized Atomic Visual Actions
论文标题:AVA: A Video Dataset of Spatio-temporally Localized Atomic Visual Actions 来源/作者机构情况: 谷歌,http:// ...
- HTML 浏览器抓包
1.浏览器 2.抓包 3.查看get/post/cookie 一 谷歌浏览器 二 抓包查看get/post数据.cookie 截图:
- SVN 安装vs插件
1.下载visualsvn for visual studio 2012/2013/2015/2017 2.查看是否安装成功 一 下载并安装插件 1.VisualSVN :VisualSVN-5.1. ...
- lesson3:小程序
问题: 一·设计思想 创建一个静态变量,利用构造函数在每次创建对象时运行的机制,计算创建对象个数. 二·程序流程图 三·程序源代码 public class Test9{ public static ...
- 数据库隔离级别深入理解(ORACLE)
TRANSACTION_READ_UNCOMMITTED 1 这种隔离级别最低,脏读,不可重复读,幻读都会发生,我用的oracle,并没有支持这个级别,不作研究. TRANSACTION_READ_C ...
- LOJ2537 PKUWC2018 Minimax 树形DP、线段树合并
传送门 题意:自己去看 首先可以知道,每一个点都有几率被选到,所以$i$与$V_i$的关系是确定了的. 所以我们只需要考虑每一个值的取到的概率. 很容易设计出一个$DP$:设$f_{i,j}$为在第$ ...