編碼和糾錯(cuò)

---

立即下載Kendo UI for Angular

該Kendo UI for Angular 二維碼支持不同的編碼和糾錯(cuò)級(jí)別。

編碼值

默認(rèn)情況下，QR碼值使用“ISO_8859_1”編碼，它支持ISO/IEC 8859-1字符集中的所有字符。要啟用對(duì)所有Unicode字符的支持，請(qǐng)將編碼設(shè)置為"UTF_8"。

提示：UTF-8編碼不包括在規(guī)范中，也不是所有閱讀器都支持。

下面的示例展示了如何設(shè)置編碼：

查看源代碼：

app.component.ts：

import { Component } from '@angular/core';

@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 Unicode characters
</div>
</div>
<div class="k-card-body">

<kendo-qrcode value="Unicode за всички ??"
encoding="UTF_8" size="150px">
</kendo-qrcode>

</div>
</div>
`
})
export class AppComponent {
}

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);

糾錯(cuò)級(jí)別

二維碼提供錯(cuò)誤糾正和恢復(fù)，允許部分損壞或覆蓋的QR碼保持可讀。每一個(gè)連續(xù)的糾錯(cuò)級(jí)別都提高了讀者恢復(fù)原始信息的機(jī)會(huì)：

• “L”-7%的數(shù)據(jù)可以恢復(fù)。
• “M”-15%的數(shù)據(jù)可以恢復(fù)。
• “Q” -25%的數(shù)據(jù)可以恢復(fù)。
• “H”-30%的數(shù)據(jù)可以恢復(fù)。

如果您希望覆蓋部分代碼，例如，在使用覆蓋時(shí)，請(qǐng)使用更高的錯(cuò)誤糾正級(jí)別，二維碼的大小可能需要增加來(lái)容納額外的信息。

要設(shè)置錯(cuò)誤糾正級(jí)別，使用errorCorrection屬性：

app.component.ts：

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

@Component({
selector: 'my-app',
template: `
<div class="k-card-deck">
<div class="k-card k-text-center"
*ngFor="let level of levels">
<div class="k-card-header">
<div class="k-card-title">
Level "{{ level }}"
</div>
</div>
<div class="k-card-body">

<kendo-qrcode [value]="value" size="120px"
[errorCorrection]="level">
</kendo-qrcode>

</div>
</div>
</div>
`
})
export class AppComponent {
public value = 'https://en.wikipedia.org/wiki/QR_code#Error_correction';
public levels: QRCodeErrorCorrection[] = [ 'L', 'M', 'Q', 'H' ];
}

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);