使用Angular2生成二维码是非常简单的,有两个库提供支持:angular2-qrcode(不支持中文)、ng2-qrcode 。
安装
在项目中打开“终端”,运行以下命令:安装angular2-qrcode
npm install angular2-qrcode --save
安装
ng2-qrcode
npm install ng2-qrcode --save
用法
在使用angular2-qrcode
首先需要在使用到的模块中引入,而ng2-qrcode
则不用:
./src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { QRCodeModule } from 'angular2-qrcode'; //在app.module.ts文件中引入
@NgModule({
declarations: [
AppComponent,
QrcodeComponent,
]
imports: [
BrowserModule,
HttpModule,
QRCodeModule, // 在此引入angualr2-qrcode模板
...
],
bootstrap: [AppComponent]
})
export class AppModule {
}
在html中使用angular2-qrcode与ng2-qrcode方式是一致的,不过接收的参数有所差别而已:
./src/app/qrcode/qrcode.html
<qr-code [value]="curQCode" size="300" background="#f2f1f1" padding="30"></qr-code> //value就是二维码中所要输人的数据
angular2-qrcode
可以接收的参数:
参数名称 | 类型 | 参数默认 | 参数说明 |
value | ‘’ | Input数据的输入 | |
size | Number | 100 | 二维码的大小 |
level | String | 'L' | 要转成的二维码的质量等级('L', 'M', 'Q', 'H')(可以为空) *二维码质量等级: L:容错率%7、M:容错率%15、Q:容错率%25、H:容错率%30、 |
background | String | 'white' | 背景颜色 |
backgroundAlpha | Number | 1.0 | 背景的不透明度 |
foreground | String | 'black' | 前景颜色 |
foregroundAlpha | Number | 1.0 | 前景的不透明度 |
mime | String | 'image/png' | 输出图像的MIME类型 |
padding | Number | null | 二维码周围的填充 |
canvas | Boolean | false |
ng2-qrcode
可以接收的参数:
参数名称 | 类型 | 参数默认 | 参数描述 |
size | Number | 256 | 二维码大小 |
level | String | 'M' | 要转成的二维码的质量等级('L', 'M', 'Q', 'H') |
colorlight | String | '#ffffff' | 输出的二维码图片中高亮部分的颜色 |
colordark | String | '#000000' | 输出的二维码图片底色的颜色 |
usesvg | Boolean | false | SVG Output |
qrdata | String | '' | Input数据的输入 |