html，vue， react，angular 前端实现二维码生成 ，二维码解析

本文的背景

近期，由于项目开发的需求，需要前端实现图片二维码的解析。

由于需求的需要，这边调研了一下，发现很多人都有着类似的需求，网上给的解决方案也很多，但是感觉还是有些。。。。。

又想到之前做过前端生成二维码。

于是这里就封装一个插件，同时满足前端js生成二维码，前端js解析本地图片二维码。 这既满足了自己的项目需求，也满足了个人的兴趣需要。 同时也希望可以帮助有着同样需求的观众老爷

步入正题：

先看案例

• 原生js中使用

html 代码

    
        
        
        
        
        
    

     
        

            

            


            


            

            生成二维码 

            清除二维码 

            再次初始化
        
    

js 代码

 

• angular.js 中使用

// html


// ts
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';

import * as QRCodeSdk from "@styleofpicasso/qrcode";

export class HomeComponent implements AfterViewInit {
  @ViewChild('qrcode', {static: false}) qrcode: ElementRef;
  constructor(private router: Router) { }

  ngAfterViewInit() {
    QRCodeSdk.initCode(this.qrcode.nativeElement, {text: '朱满要真水'});
  }
}

• vue.js 中使用

// html

• react.js中使用

// js
import React from 'react';
import * as QRCodeSdk from "@styleofpicasso/qrcode";

class TestComponent extends React.Component {

    constructor(props) {
        super(props);
        this.qrcode = React.createRef();
    }

    componentDidMount() {
        // Options
        var options = {
            text: "https://github.com/ushelp/EasyQRCodeJS"
        }
        // Create new QRCode Object
        QRCodeSdk.initCode( this.qrcode.current, options);
    }
    render() {
        return (
        

            

        
        );
    }
}

export default TestComponent

// ts
import React, { useEffect } from "react";
import * as QRCodeSdk from "@styleofpicasso/qrcode";

function TestComponent() {
  const code = React.createRef();

  useEffect(() => {
    QRCodeSdk(code.current, { text: "https://github.com/ushelp/EasyQRCodeJS" });
  }, [code]);

  return (
    

      


        

      
    
  );
}

export default TestComponent;

 

 插件名称 @styleofpicasso/qrcode

实现功能：

QRCode 支持本地图片的二维码解析， 二维码生成 / 带 logo 的二维码的生成 / 二维码的清除 / 二维码大小的设置 / 二维码的设置

 插件的使用说明

1. 安装

• For JQuery and original js

Download js lib from npmjs

npm i @styleofpicasso/qrcode

add js to html

• For TypeScript such as Angular Vue React

npm i @styleofpicasso/qrcode --save-dev

2. 引入

import * as QRCode from '@styleofpicasso/qrcode';

3. 使用

• 初始化生成二维码

/**
* id 生成二维码的容器
* config 初始化二维码的配置信息
*/
QRcode.initCode(id, config);

config的配置信息

// 默认配置 （已经添加过的配置信息）
{
  // 二维码的默认配置
  width: 128,
  height: 128,
  colorDark: '#000',
  colorLight: '#fff',
  correctLevel: QRCode.CorrectLevel.H,
  dotScale: 1,

  // 二维码的生成工具（canvas 或 svg） 默认 canvas
  drawer: 'canvas'
}

// 必须添加的配置
{
  // 初始生成二维码的内容
  text: ''
}

// 可以添加的配置
{
  // 二维码logo的配置信息
  logo: undefined,
  logoWidth: undefined,
  logoHeight: undefined,
  logoBackgroundColor: '#fff',
  logoBackgroundTransparent: false,

  // 二维码背景的配置信息
  backgroundImage: '', // Background Image
  backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1.
  autoColor: false,

  // 二维码标题的配置信息
  title: 'QR Title', // content
  titleFont: "bold 18px Arial", // font. default is "bold 16px Arial"
  titleColor: "#004284", // color. default is "#000"
  titleBackgroundColor: "#fff", // background color. default is "#fff"
  titleHeight: 70, // height, including subTitle. default is 0
  titleTop: 25 // d

  // 二维码副标题的配置信息
  subTitle: 'QR subTitle', // content
  subTitleFont: "14px Arial", // font. default is "14px Arial"
  subTitleColor: "#004284", // color. default is "4F4F4F"
  subTitleTop: 40 // draws y coordinates. default is 0

  // 二维码的事件配置
  onRenderingStart: undefined,
  onRenderingEnd: undefined,
}

 

• 再次生成二维码

/**
 * 根据内容生成二维码
 * text 二维码内容
 */
QRCode.makeCode(text);

• 二维码的清除

/**
 * 清除二维码
 */
QRCode.clearCode();

• 二维码大小调整

/**
 * 二维码的大小调整
 * width : 宽
 * height: 高
 */
QRCode.resizeCode(width, height)

• 图片二维码的解析

/**
 * 图片二维码的解析功能
 * file 本地选择的图片文件； 或 有效图片的路径
 * callback  解析成功之后的回调函数， 参数： 解析的内容 当解析失败时，返回undefine， 成功返回解析数据
 */
QRCode.deCode(file, callback);

npm地址

https://www.npmjs.com/package/@styleofpicasso/qrcode

 

以上便是二维码插件的功能说明以及使用说明，希望可以帮到大家， 若是有什么不足的地方也希望大家指出