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

最新推荐文章于 2024-05-14 17:37:05 发布

styleofpicasso

最新推荐文章于 2024-05-14 17:37:05 发布

阅读量1.7k

点赞数

分类专栏：二维码 qrcdoe 二维码解析文章标签： javascript 前端 html5 es6 webpack

本文链接：https://blog.csdn.net/zhumany_csdn/article/details/109180448

版权

二维码同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

qrcdoe

1 篇文章 0 订阅

订阅专栏

二维码解析

1 篇文章 0 订阅

订阅专栏

本文的背景

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

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

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

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

步入正题：

先看案例

原生js中使用

html 代码

<html lang="en">
    <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

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

styleofpicasso

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html，vue， react，angular 前端实现二维码生成，二维码解析

本文的背景近期，由于项目开发的需求，需要前端实现图片二维码的解析。由于需求的需要，这边调研了一下，发现很多人都有着类似的需求，但是网上给的解决方案也很多，但是有感觉似乎没有很好的解决。又想到之前做过前端生成二维码。于是这里就有了封装一个插件，同时满足前端js生成二维码，前端js解析本地图片二维码。这里满足了自己的项目需求，也满足了个人的兴趣需要。同时也希望可以帮助有着同样需求的观众老爷????步入正题：先看案例html 代码<html lang="en">
复制链接

扫一扫