VUE 前端zxing-js生成二维码DEMO-文章-关尔先生

VUE 前端zxing-js生成二维码DEMO 笔记

vue框架 调用zxing.js插件生成二维码,可在中间添加LOGO,可调整容错率

关尔先生2020-10-21 11:22:58


1、DEMO源码:https://github.com/ZhengXinquan/demo

2、zxing.js官网:https://github.com/zxing-js/library

2、DEMO

<template>
  <div>
    <van-field clickable placeholder="在这里输入要转为二维码的文本内容" v-model="text" />
    <van-field clickable placeholder="容错率(L M Q L),默认 L" v-model="errLevel" />
    <van-field clickable placeholder="margin" v-model="margin" />
    <van-field clickable placeholder="width,默认300" v-model="width" />
    <van-field clickable placeholder="边框颜色(red #FF0000 rgb(255,0,0) 等),默认无" v-model="borderColor" />
    <div id="result">div>
  div>
template>
<script>
import Vue from "vue";

import { BrowserQRCodeSvgWriterEncodeHintType } from "@zxing/library";

const codeWriter = new BrowserQRCodeSvgWriter();

export default {
  data() {
    return {
      codeWriternull,
      text"",
      errLevel"",
      margin"",
      width"",
      borderColor:"",
    };
  },
  watch: {
    text() {
      this.createCodeFn();
    },
    errLevel() {
      this.createCodeFn();
    },
    margin() {
      this.createCodeFn();
    },
    width() {
      this.createCodeFn();
    },
    borderColor(){
      this.createCodeFn();
    },
  },
  mounted() {
    console.log(EncodeHintType);
    // 0: "ERROR_CORRECTION"
    // 1: "CHARACTER_SET"
    // 2: "DATA_MATRIX_SHAPE"
    // 3: "MIN_SIZE"
    // 4: "MAX_SIZE"
    // 5: "MARGIN"
    // 6: "PDF417_COMPACT"
    // 7: "PDF417_COMPACTION"
    // 8: "PDF417_DIMENSIONS"
    // 9: "AZTEC_LAYERS"
    // 10: "QR_VERSION"
    // AZTEC_LAYERS: 9
    // CHARACTER_SET: 1
    // DATA_MATRIX_SHAPE: 2
    // ERROR_CORRECTION: 0
    // MARGIN: 5
    // MAX_SIZE: 4
    // MIN_SIZE: 3
    // PDF417_COMPACT: 6
    // PDF417_COMPACTION: 7
    // PDF417_DIMENSIONS: 8
    // QR_VERSION: 10
    // you can get a SVG element.
    // const svgElement = codeWriter.write(this.text, 300, 300);
    this.createCodeFn();
  },
  methods: {
    createCodeFn() {
      const re = document.getElementById("result");
      re.innerHTML = "";

      // 配置
      let hints = new Map();
      if (this.errLevel)
        hints.set(EncodeHintType.ERROR_CORRECTIONthis.errLevel); // 容错率
      if (this.marginhints.set(EncodeHintType.MARGINthis.margin); // Margin

      const _width = this.width || 300;

      const svgElement = codeWriter.write(
        this.text || "https://www.baidu.com",
        _width,
        _width,
        hints
      );
      if(this.borderColor)svgElement.style="border: 1px "+this.borderColor+" solid"
      re.appendChild(svgElement);

      //添加图片标签
      var image = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "image"
      );

      const _logoW = _width / 7;
      const _center = (_width - _logoW/ 2;
      image.setAttribute("x"_center);
      image.setAttribute("y"_center);
      image.setAttribute("width"_logoW);
      image.setAttribute("height"_logoW);
      image.href.baseVal = require("../../assets/default-female.png"); //关键一句,设置image的url图片,要用image.href.baseVal
      svgElement.appendChild(image);
    },
  },
};
script>
<style lang="less" scoped>
style>

前端vue.jszxingjs生成二维码

上一篇:VUE 前端zxing-js调用摄像头扫码DEMO

下一篇:VUE 前端笔记:使用 v-charts.js百度地图 实现电子围栏手机定位打卡

本文链接: http://www.nanshanqiao.com/zz_article/61.html

暂无评论

评论