覆蓋

---

立即下載Kendo UI for Angular

二維碼支持圖像疊加和特殊的Swiss Code疊加。

圖像覆蓋

由于二維碼的糾錯(cuò)功能，即使部分被覆蓋或不可讀，也可以恢復(fù)二維碼中的信息，此功能允許您使用圖像覆蓋來(lái)自定義二維碼的外觀。

提示：始終測(cè)試代碼是否正確讀取到所需的覆蓋。根據(jù)值的長(zhǎng)度和覆蓋的大小，您可能需要將errorCorrection級(jí)別提高到“M”或“H”。

要添加圖像疊加，請(qǐng)準(zhǔn)備一張合適的圖像，并使用疊加設(shè)置設(shè)置其尺寸和位置：

查看源代碼：

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: 'https://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

要?jiǎng)?chuàng)建一個(gè)Swiss二維碼，請(qǐng)將覆蓋屬性設(shè)置為特殊的“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);