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程序库生成二维码 某天浏览网页发现了一个二维码的程序库.它的描述说他可以扫描二维码图像.我很感兴趣,想试试他是不是会有用.所以我就用了些方法扫描二维码图像来测试一下.结果 ...
随机推荐
- go标准库的学习-reflect
参考: https://studygolang.com/pkgdoc http://c.biancheng.net/golang/concurrent/ 导入方式: import "refl ...
- Linux系统--命令行安装weblogic10.3.6
Linux下命令行安装weblogic10.3.6 一.安装前准备工作: 1.创建用户useradd weblogic;创建用户成功linux系统会自动创建一个和用户名相同的分组,并将该用户分到改组中 ...
- 导入其他python文件或者python文件的函数
from abc import xxx 从abc的py文件导入一个具体的函数或者类 import abc 直接导入文件 a.b写在同一个文件目录下,a要使用b,直接import就可以了
- vue v-for 遍历循环时的key值的报错
问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primit ...
- 获取键盘的ascii码
waitKey(1) & 0xFF获取当前按的键的ascii码,
- PAT A1139 First Contact (30 分)——set
Unlike in nowadays, the way that boys and girls expressing their feelings of love was quite subtle i ...
- AI mac安装TensorFlow
1.安装pip sudo easy_install pip 2.安装virtualenv sudo pip install --upgrade virtualenv 3.在指定目录创建virtuale ...
- JavaScript中的slice函数
String.slice(start,end)returns a string containing a slice, or substring, of string. It does not mod ...
- coredns CrashLoopBackOff 报错
1.kubectl logs -f coredns-99b9bb8bd-47mvf -n kube-system .:53 2018/09/22 07:39:37 [INFO] CoreDNS-1.2 ...
- NDK toolchain对应ABI
有些时候,解决一些问题,我们需要多一些耐心. 从今天起,正式开始SkylineGlobe移动端Android版本的二次开发. Application.mk修改为NDK_TOOLCHAIN := arm ...