VUE生成批量生产二维码(太阳码)并压缩下载，微信扫一扫或者小程序内扫一扫

项目需求

租车场景：需要用户使用微信扫一扫直接打开小程序，携带车辆参数。

界面展示

前景颜色就是文字的样子，背景颜色就是整体背景色、把正方的太阳码图片裁剪成圆形方法中有实现过程（注：我没有看详细看文档不知道能否生成圆形的图片，我的后端是给我我一个正方的╮(╯▽╰)╭ ）。

整体架构流程

前端使用到了jszip、file-saver俩个包需要要自行下载
由于这是服务器那边去微信换取多个二维码(太阳码)，然后返回过来再处理。所以取到的值就是一个太阳码的base64格式的字符串。
我这里是传给后端数量，后端生成好统一返还过来了。如果您的后端告你需要一个个换取的话，获取哪里自行改成循环即可，也很简单。
由于太阳码只能小程序调用接口生成，如果想要自己生成的二维码的话，自行下载qrcode然后根据参数自行生成二维码，循环即可。

上代码

弹框的样式代码

<!-- 二维码下载前设置弹框 -->
<el-dialog
      :title="title"
      :visible.sync="openDataScope"
      width="1000px"
      append-to-body
      center
    >
      <el-row>
        <el-col :span="12">
          <div class="qrcode_title">二维码预览</div>
          <div class="qrcode_box">
            <img
              class="qrcode_canvas"
              id="qrcode_canvas"
              ref="qrcode_canvas"
              alt="二维码"
            />
            <canvas
              v-show="false"
              :width="qrSize"
              :height="qrSize"
              class="canvas"
              ref="canvas"
            ></canvas>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="qrcode_title">设置</div>
          <el-form :model="codeForm" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="前景颜色">
                  <el-color-picker
                    @change="setColor"
                    v-model="codeForm.frontColor"
                  ></el-color-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="背景颜色">