canvas生成二维码附带icon并实现下载

canvas生成二维码附带icon并实现下载

https://blog.csdn.net/chy555chy/article/details/85785819

利用 qrcode 生成二维码是不带 icon 的，去网上查找解决方案需要修改源码。
所以只好自己开搞了
效果如下：

代码如下

<template>
  <div>
    <!-- 二维码和icon -->
    <img :src="rediusIconSrc" alt="ICON">
    <img :src="qrCodeSrc" alt="qrcode">
    <img :src="iconCodeSrc" alt="IconAndQrcode">
    <button @click="getQrcode">下载</button>
  </div>
</template>
<script>
import QRCode from 'qrcode'; // 需安装 qrcode 插件;
export default {
   
  data() {
   
    return {
   
      qrCodeSrc: '',
      rediusIconSrc: '',
      iconCodeSrc: '',
      qrCodeW: '200',
      qrCodeH: '200',
      codeContext: 'text123',
      iconScale: 0.2 // icon 占二维码的比例;
    };
  },
  mounted() {
   
    this.getCanvas(this.codeContext);
  },
  methods: {
   
    getQrcode() {
   
      let _a = document.createElement('a');
      _a.href = this.iconCodeSrc;
      _a.download = '带有 icon 的二维码';
      _a.click();
    },
    getCanvas(codeContext, option = {
   errorCorrectionLevel: 'H', margin: 1})