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

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

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

相关文章
小程序二维码和小程序带参数二维码生成
本文主要讲解小程序二维码的基本概念,帮助开发和运营人员更好的掌握小程序参数二维码,同时也包含小程序二维码官方文档解读,更好的掌握小程序参数二维码在业务中的使用 一,小程序二维码小白介绍 二,小程序二维码开发介绍 三,小程序二维码生成介绍 四,小程序二维...
1282 0
python之qrcode模块生成二维码
用Python的qrcode包来生成二维码很简单 一、前期准备: pip install qrcode qrcode 依赖 Image 这个包: pip install Image 二、安装好之后就可以通过代码实现二维码了 - 1.
2084 0
MyEclipse 利用反向功能生成Java 实体类
1、Window -> Open Perspective -> MyEclipse Database Explorer 到DB Broswer界面 2、右键 -> New,新建一个数据库连接 3、创建一个java项目   4、给项目添加Hibernate Capabilit...
824 0
给网站添加微信扫描二维码登录功能
最近网站PC端集成微信扫码登录,踩了不少坑,在此记录下实现过程和注意事项。
3430 0
logstash6.8.12动态生成elasticsearch的index的正确方法
网上有很多的【假】logstash动态生成index的文章,看了很多,根本不符合我的需求,所以我决定来一篇干货,真正的解决问题。人狠话不多,代码直接上。我是使用官方提供的helm包进行ELK安装的
130 0
8
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载