classroom-instruments/src/components/TheQrCode/index.tsx

import { defineComponent } from 'vue';
import { AwesomeQR } from 'vue-qr/src/lib/awesome-qr';
import { px2vw } from '@/utils/index'
function toBoolean(val: any): boolean {
  if (val === '') return val;
  return val === 'true' || val == '1';
}
function readAsArrayBuffer(url: any) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob'; //设定返回数据类型为Blob
    xhr.onload = function () {
      const reader = new FileReader();
      reader.onloadend = function () {
        resolve(reader.result);
      };
      reader.readAsArrayBuffer(xhr.response); //xhr.response就是一个Blob，用FileReader读取
    };
    xhr.open('GET', url);
    xhr.send();
  });
}

export default defineComponent({
  name: 'TheQrCode',
  props: {
    text: {
      type: String,
      required: true
    },
    qid: {
      type: String
    },
    correctLevel: {
      type: Number,
      default: 0
    },
    size: {
      type: Number,
      default: 220
    },
    margin: {
      type: Number,
      default: 20
    },
    colorDark: {
      type: String,
      default: '#000000'
    },
    colorLight: {
      type: String,
      default: '#FFFFFF'
    },
    bgSrc: {
      type: String,
      default: undefined
    },
    background: {
      type: String,
      default: 'rgba(0,0,0,0)'
    },
    backgroundDimming: {
      type: String,
      default: 'rgba(0,0,0,0)'
    },
    logoSrc: {
      type: String,
      default: undefined
    },
    logoBackgroundColor: {
      type: String,
      default: 'rgba(255,255,255,1)'
    },
    gifBgSrc: {
      type: String,
      default: undefined
    },
    logoScale: {
      type: Number,
      default: 0.2
    },
    logoMargin: {
      type: Number,
      default: 0
    },
    logoCornerRadius: {
      type: Number,
      default: 8
    },
    whiteMargin: {
      type: [Boolean, String],
      default: true
    },
    dotScale: {
      type: Number,
      default: 1
    },
    autoColor: {
      type: [Boolean, String],
      default: true
    },
    binarize: {
      type: [Boolean, String],
      default: false
    },
    binarizeThreshold: {
      type: Number,
      default: 128
    },
    callback: {
      type: Function,
      default: function () {
        return undefined;
      }
    },
    bindElement: {
      type: Boolean,
      default: true
    },
    backgroundColor: {
      type: String,
      default: '#FFFFFF'
    },
    components: {
      default: function () {
        return {
          data: {
            scale: 1
          },
          timing: {
            scale: 1,
            protectors: false
          },
          alignment: {
            scale: 1,
            protectors: false
          },
          cornerAlignment: {
            scale: 1,
            protectors: true
          }
        };
      }
    }
  },
  data() {
    return {
      imgUrl: '' as any
    };
  },
  watch: {
    $props: {
      deep: true,
      handler() {
        this.main();
      }
    }
  },
  mounted() {
    this.main();
  },
  methods: {
    async main() {
      // const that = this;
      if (this.gifBgSrc) {
        const gifImg = await readAsArrayBuffer(this.gifBgSrc);
        const logoImg = this.logoSrc;

        this.render(undefined, logoImg, gifImg);
        return;
      }
      const bgImg = this.bgSrc;
      const logoImg = this.logoSrc;
      this.render(bgImg, logoImg);
    },
    async render(img: any, logoImg: any, gifBgSrc?: any) {
      console.log(img, logoImg, gifBgSrc);
      new AwesomeQR({
        gifBackground: gifBgSrc,
        text: this.text,
        size: this.size,
        margin: this.margin,
        colorDark: this.colorDark,
        colorLight: this.colorLight,
        backgroundColor: this.backgroundColor,
        backgroundImage: img,
        backgroundDimming: this.backgroundDimming,
        logoImage: logoImg + '?' + new Date().getTime(),
        logoScale: this.logoScale,
        logoBackgroundColor: this.logoBackgroundColor,
        correctLevel: this.correctLevel,
        logoMargin: this.logoMargin,
        logoCornerRadius: this.logoCornerRadius,
        whiteMargin: toBoolean(this.whiteMargin),
        dotScale: this.dotScale,
        autoColor: toBoolean(this.autoColor),
        components: this.components
      })
        .draw()
        .then((dataUri: any) => {
          console.log('🚀 ~ dataUri:', dataUri);
          this.imgUrl = dataUri;
          this.callback && this.callback(dataUri, this.qid);
        });
    }
  },
  render() {
    return (
      < >
        {this.bindElement && this.imgUrl && (
          <img style={{ width: px2vw(this.size), height: px2vw(this.size), display: 'inline-block', zIndex: 1000 }} src={this.imgUrl} />
        )}
      </>
    );
  }
});