telerik中文文档

覆盖

立即下载Kendo UI for Angular

二维码支持图像叠加和特殊的Swiss Code叠加。

图像覆盖

由于二维码的纠错功能，即使部分被覆盖或不可读，也可以恢复二维码中的信息，此功能允许您使用图像覆盖来自定义二维码的外观。

提示：始终测试代码是否正确读取到所需的覆盖。根据值的长度和覆盖的大小，您可能需要将errorCorrection级别提高到“M”或“H”。

要添加图像叠加，请准备一张合适的图像，并使用叠加设置设置其尺寸和位置：

查看源代码：

app.component.ts：

import { Component } from '@angular/core';
import { QRCodeOverlay } from '@progress/kendo-angular-barcodes';

@Component({
selector: 'my-app',
template: `
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
QR Code with Image overlay
</div>
</div>
<div class="k-card-body">

<kendo-qrcode value="The quick brown fox jumps over the lazy dog."
[overlay]="overlay" errorCorrection="Q"
size="200px">
</kendo-qrcode>

</div>
</div>
`
})
export class AppComponent {
public overlay: QRCodeOverlay = {
type: 'image',
imageUrl: '//demos.telerik.com/kendo-ui/content/shared/images/site/kendoka-cta.svg',
width: 60,
height: 60
};
}

app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BarcodesModule } from '@progress/kendo-angular-barcodes';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, BarcodesModule, ButtonsModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

export class AppModule { }

main.ts:

import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Swiss Code

要创建一个Swiss二维码，请将覆盖属性设置为特殊的“swiss”覆盖类型：

查看源代码：

app.component.ts：

import { Component } from '@angular/core';
import { QRCodeOverlay } from '@progress/kendo-angular-barcodes';

const sample = `SPC
0200
1
CH4431999123000889012
S
Robert Schneider AG
Rue du Lac
1268
2501
Biel
CH

 

 

 

1949.75
CHF
S
Pia-Maria Rutschmann-Schnyder
Grosse Marktgasse
28
9400
Rorschach
CH
QRR
210000000003139471430009017
Instruction of 03.04.2019
EPD
//S1/10/10201409/11/190512/20/1400.000-53/30/106017086/31/180508/32/7.7/40/2:10;0:30
Name AV1: UV;UltraPay005;12345
Name AV2: XY;XYService;54321`;

@Component({
selector: 'my-app',
template: `
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
Swiss QR Code
</div>
</div>
<div class="k-card-body">

<kendo-qrcode [value]="receipt" size="400px"
[overlay]="overlay" errorCorrection="Q">
</kendo-qrcode>

</div>
</div>
`
})
export class AppComponent {
public overlay: QRCodeOverlay = {
type: 'swiss'
};

public receipt = sample;
}

app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BarcodesModule } from '@progress/kendo-angular-barcodes';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, BarcodesModule, ButtonsModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

export class AppModule { }

main.ts:

import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);