ionic3二维码功能(生成二维码)-阿里云开发者社区

开发者社区> 小鲜女他爸> 正文

ionic3二维码功能(生成二维码)

简介: 生成二维码 方法一:qrcanvas(支持中文) 1. 安装依赖: npm i qrcanvas --save 2. 新建一个组件Component,通过这个组件来提供生成二维码的能力 ionic g component qrcode 3.
+关注继续查看

生成二维码

方法一:qrcanvas(支持中文)

1. 安装依赖:

     npm i qrcanvas --save

2. 新建一个组件Component,通过这个组件来提供生成二维码的能力

    ionic g component qrcode

3. 在qrcode包下新增一个qrcode.module.ts文件,文件及文件内容如下:

img_67b229044a4895fda872ffca03ccda1a.png
qrcode

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {QrcodeComponent} from "./qrcode";
@NgModule({
  declarations: [
    QrcodeComponent,
  ],
  imports: [
    IonicPageModule.forChild(QrcodeComponent)
  ],
  exports: [
    QrcodeComponent
  ]
})
export class I2fQrCodeModule {
}

4. 编写qrcode.ts文件代码实现二维码生成,代码如下:

import {AfterViewInit, Component, ElementRef, Input, OnChanges, SimpleChanges} from '@angular/core';
import qrcanvas from 'qrcanvas';
@Component({
  selector: 'i2f-qrcode',
  templateUrl: 'qrcode.html'
})
export class QrcodeComponent implements AfterViewInit, OnChanges {
  options: any;
  effects = ['none', 'liquid', 'round', 'spot'];
  @Input() size: string;
  @Input() data: string;
  @Input() logo: string;

  constructor(private elementRef: ElementRef) {
  }
  ngAfterViewInit() {
  }
  ngOnChanges(changes: SimpleChanges) {
    if (
      'backgroundAlpha' in changes ||
      'foregroundAlpha' in changes ||
      'mime' in changes ||
      'padding' in changes ||
      'size' in changes ||
      'data' in changes ||
      'logo' in changes ||
      'canvas' in changes) {
      this.generateQrCode();
    }
  }
  generateQrCode() {
    let innerHTML = '';
    this.elementRef.nativeElement.querySelector('#qrcode').innerHTML = innerHTML;
    this.options = {
      cellSize: 8,
      size: this.size,
      correctLevel: 'H',
      data: this.data,
      effect: {
        key: 'none',
        value: 1,
      }
    };
    this.options.effect.key = this.effects[Math.floor(Math.random() * this.effects.length)];
    if (this.logo) {
      let image = new Image();
      image.src = this.logo;
      this.options.logo = {
        image,
        size: 10 / 100
      };
      image.onload = () => {
        const canvas = qrcanvas(this.options);
        this.elementRef.nativeElement.querySelector('#qrcode').appendChild(canvas);
      };
    } else {
      const canvas = qrcanvas(this.options);
      this.elementRef.nativeElement.querySelector('#qrcode').appendChild(canvas);
    }
  }
}

5. 编写页面qrcode.html,代码如下:

<div id="qrcode" (click)="generateQrCode()"></div>

6. 使用I2f-qrcode生成二维码:

在页面中:

    <i2f-qrcode [data]="'中文'" [size]="180" [logo]="'assets/img/logo.png'" ></i2f-qrcode>

在module.ts中引入

  imports: [
    IonicPageModule.forChild(QrCodePage),
    I2fQrCodeModule
  ],

7. 结果展示

img_a085bb552b917dfe8b542e1c43071aa7.png
image.png

方法二. angular2-qrcode(不支持中文)

1. 安装npm依赖:

npm install angular2-qrcode --save

2. 在app.module.ts中引入QrCodeModule模块

import { QRCodeModule } from 'angular2-qrcode';

imports: [... QRCodeModule... ],

3. 在实际调用页面的module.ts中引入QRCodeModule,并在页面中以指令方式使用

imports: [QRCodeModule],

<qr-code [value]="qrCodeValue"></qr-code>  

qrCodValue是一个变量,也可以是一个写死的值。

  1. 可选参数:

参数 类型 默认值 描述
value String '' Your data string
size Number 128 This is the height/width of your QR Code component
level String 'M' QR Correction level ('L', 'M', 'Q', 'H')
type Number 4 Buffer size for data string
background String 'white' The color for the background
backgroundAlpha Number 1.0 The opacity of the background
foreground String 'black' The color for the foreground
foregroundAlpha Number 1.0 The opacity of the foreground
mime String 'image/png' The mime type for the output image
padding Number null The padding around the QR Code
canvas Boolean false Will output a canvas element if true

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
证书转换-SSL证书生成:cer,jks文件 韩俊强的博客
一.生成.jks文件 资料:HTTPS-老司机手把手教你SSL证书申购-TrustAsia证书 HTTPS时代已来,手把手指导申请免费SSL证书 1、keystore的生成: 分阶段生成: keytool -genkey -alias yushan(...
4981 0
微信公众平台----带参数二维码生成和扫描事件
原文:微信公众平台----带参数二维码生成和扫描事件 摘要: 账号管理----生成带参数的二维码 消息管理----接收消息----接收事件推送 为了满足用户渠道推广分析和用户帐号绑定等场景的需要,公众平台提供了生成带参数二维码的接口。
1964 0
Powerdesigner中如何生成测试数据
原文http://www.cnblogs.com/netsql/archive/2010/05/28/1746568.html   设计表完成以后,我们需要生成一些测试数据,可以直接更新到数据库中,下面我们就来试试: 第一步:建立需要的Profiles测试文件,【Model】--【Test Data Profiles】,如图所示: 第二步:则打开属性窗口,如图所示,下面要进行详细的介绍了 选择不同数据来源,则Detail选项卡是不一样的, 数据类型有三种:NUMBER,Character,DATA三种类型,因为一般情况下数据类型也只有这三种类型。
705 0
给网站添加微信扫描二维码登录功能
最近网站PC端集成微信扫码登录,踩了不少坑,在此记录下实现过程和注意事项。
3311 0
8
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载