Как генерировать разные типы QR-кода в Angular 5 (Typescript) - PullRequest
Новая
       4

Как генерировать разные типы QR-кода в Angular 5 (Typescript)

0 голосов
/ 05 июня 2018 

import {Component, Inject, Input, ElementRef, OnInit} from '@angular/core';
declare let QRCode: any;
@Component({
  selector: 'app-qrcode',
  templateUrl: './qrcode.component.html',
  styleUrls: ['./qrcode.component.scss']
})
export class QrcodeComponent implements OnInit {
  elementType : 'url' | 'canvas' | 'img' = 'url';
  value:any; 
  constructor() 
  {}

  ngOnInit() {
    this.value  = 'WWW.Google.com';
  }

}
<ngx-qrcode [qrc-element-type]="elementType " [qrc-value] = "value">
  </ngx-qrcode>

Мне нужно сгенерировать qr-код, я это сделал, но хочу изменить ТИП qr-кода, что означает.когда мы сканируем qr-код, в контактную информацию автоматически добавляются контактные данные: «Получить направление» для Qr-кода карты, тип электронной почты будет направлен на наш почтовый ящик и в PDF для загрузки.

1 Ответ

0 голосов
/ 08 июня 2018

Вам не нужно менять тип содержимого, допустим, вы хотите закодировать значение, которое содержит адрес электронной почты или другое с URL-адресом, это не тот тип, который здесь подразумевается.Только устройство пользователя решает, обрабатывать ли или как полезную нагрузку (значение) qrcode.

Тип здесь означает «визуализированный как canvas-tag» или «визуализированный как img-Tag».

Более длинная часть:

Если вы посмотрите на источник библиотеки, elementType передается оператору switch, который по умолчанию (для url & img) принимает значение img.Поскольку на самом сайте пакетов не так много документации по elementType, я взглянул на примеры базового пакета под названием qrcode

Из документации qrcode: toCanvas (canvas)= Рисует символ qr кода на холст.toDataURL (img, url) = Возвращает строковое представление QR-кода.В настоящее время работает только для SVG.

Так что, не копаясь слишком глубоко в самой библиотеке, нужно просто написать, чтобы получить закодированное электронное письмо в виде qrcode, отображаемого в теге изображения. 

<ngx-qrcode [qrc-element-type]="img" [qrc-value]="mailto:test@example.com"></ngx-qrcode>

Поскольку для qrc-element-type по умолчанию установлено значение "toDataURL", вы можете его опустить (еще не проверял) или добавить некоторые дополнительные значения для ваших значений.

Отказ от ответственности: я являюсьАвтор другого пакета QR-кода под названием angularx-qrcode , который работает для Angular4,5 и 6.

Я сделал рабочее демо-приложение для angular5 / 6 доступным здесь: https://github.com/Cordobo/angularx-qrcode-sample-app

...