天天看點
傳回

html，vue， react，angular 前端實作二維碼生成 ，二維碼解析

本文的背景

近期，由于項目開發的需求，需要前端實作圖檔二維碼的解析。

由于需求的需要，這邊調研了一下，發現很多人都有着類似的需求，網上給的解決方案也很多，但是感覺還是有些。。。。。

又想到之前做過前端生成二維碼。

于是這裡就封裝一個插件，同時滿足前端js生成二維碼，前端js解析本地圖檔二維碼。 這既滿足了自己的項目需求，也滿足了個人的興趣需要。 同時也希望可以幫助有着同樣需求的觀衆老爺😜

步入正題：

先看案例

  • 原生js中使用

html 代碼

<html >
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src='./qrcode.min.js'></script>
        <title>Document</title>
    </head>

    <body> 
        <div>
            <input type="file" id='file' value='選擇需要解析的二維碼'>

            <li class="code-result"></li>

            <div id="qrcode"></div>

            <input type="text" value='' id='text'>

            <button class="make-code">生成二維碼</button> <br/>
            <button class="clear">清除二維碼</button> <br/>
            <button class="init">再次初始化</button>
        </div>
    </body>
</html>

js 代碼

<script>
      // 初始化生成二維碼
      function initQrCode() {
          QRCode.initCode('qrcode', {
              text: '張三李四王五',
          });
      }

      initQrCode();

      // 再次手動生成二維碼
      $('.make-code').click(function () {
          const text = $('#text').val();
          QRCode.makeCode(text);
      })


      // 解析二維碼
      $('#file').change(function () {
          const file = $(this)[0].files[0]
          QRCode.deCode(file, (msg) => {
            console.log(msg);
            $('.code-result').html(msg);
          })
      })

      $('.clear').click(function () {
        QRCode.clearCode();
      })

      $('.init').click(function () {
        initQrCode();
      })
  </script>
  • angular.js 中使用 
// html
<div #qrcode></div>

// 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
<div ref="qrcode></div>

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

export default {
  name: 'text',
  data() {
    return {
      options: {
        text: "https://github.com/ushelp/EasyQRCodeJS"
      }
    }
  }
  mounted(){
    QRCodeSdk.initCode(this.$refs.qrcode, options);
  },
  methods:{
      btnClick(){

      }
  }
}
  • 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 (
        <div className = "test">
            <div ref={this.qrcode}></div>
        </div>
        );
    }
}

export default TestComponent

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

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

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

  return (
    <div className="App">
      <header className="App-header">

        <div ref={code}></div>
      </header>
    </div>
  );
}

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

<script type="text/javascript" src="/qrcode.min.js"></script>
  • 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

以上便是二維碼插件的功能說明以及使用說明，希望可以幫到大家， 若是有什麼不足的地方也希望大家指出

二維碼 qrcdoe 二維碼解析 javascript 前端 html5 es6 webpack
上一篇: HTML5筆記：利用JS生成中間帶logo的二維碼
下一篇: 初識C++多态

繼續閱讀