html2canvas 包含图片生成证书，解决图片跨域问题

结果演示：左图为UI给的证书图片，后台查出来的数据渲染进去后，生成base64编码返回给后端

 准备一个生成证书按钮，绑定事件verifyCert

<el-button type="primary" @click="verifyCert">生成证书</el-button>

 准备一块区域遍历后端返回的证书集合certList，其中item.pic为集合中每一个对象里的证书

 <div
    class="cert_item"
    v-for="item in certList"
    :key="item.id"
     v-viewer="viewerOptions"
  >
    <img
       class="cert_item_img"
       :src="'http://docentp.xlteacher.cn/' + item.pic"
       alt=""
       style="width: 20%;
       height: 20%;"
    />
</div>

 data里面定义变量

data() {
    return {
      certList: [], //证书list
    }
  },

调用后台接口获取证书集合certList

 methods: {
    //获取certList
    getmyCert() {
      this.axios.post("/index/my_cert", fd).then((res) => {
        this.certList = res.data.list
      })
    },
 },

 我们在mounted中调用这个方法，这样我们初步的展示list就写好了

mounted() {
  this.getmyCert();
},

接下来就是生成证书，先在 data中定义证书内容对象

data() {
    return {
      certList: [], //证书list
      certInfo2: {}, //证书填写的内容对象
    }
},

 <!-- 证书--->
    <div class="c-c">
      <div class="certificate" id="certificate2" ref="certificate2">
        <!-- 姓名-->
        <span class="cert-name">{{ certInfo2.name }}</span>
        <!-- 头像-->
        <span class="cert_head_pic" style="z-index: 1000;">
          <img crossorigin="anonymous" id="cert_head_pic_img"
               style="width: 200px; height: 260px"
               alt=""
          /></span>
        <!-- 取证时间-->
        <span class="cert-etime">{{ certInfo2.end_time }}</span>
        <!-- 身份证号 -->
        <span class="cert-IDnumber">{{ certInfo2.IDnumber }}</span>
        <!-- 资格正号 -->
        <span class="cert_num">{{ certInfo2.cert_num }}</span>
        <!-- 查询地址 -->
        <span class="query_address">{{ certInfo2.query_address }}</span>
        <!-- 签发单位 -->
        <span class="cert-cname">{{ certInfo2.cert_name }}</span>
        <!-- 签发时间 -->
        <span class="cert-ctime">{{ certInfo2.cert_time }}</span>
      </div>
    </div>

 点击生成证书

methods: {
    //获取certList
    getmyCert() {
      let fd = new FormData()
      fd.append("page_size", 15)
      this.axios.post("/index/my_cert", fd).then((res) => {
        console.log(res)
        this.cert = res.data
        this.certList = res.data.list
        if (res.data.list == 0) {
          this.certEmpty = true
        }
      })
    },
    //点击生成证书按钮
    verifyCert() {
      this.axios.post("exam/apply_class_cert").then((res) => {
          for (let i = 0; i < res.data.info.length; i++) {
              this.certInfo2 = res.data.info[i];
              this.cert_id2 = res.data.info[i].id
              setTimeout(() => {
                this.createCert2();
              }, 1000);

          }
      });
    },
    //解决请求图片的跨域问题
    async createCert2() {
      let base64 = ''
      let _this = this
      //url: this.certInfo2.cert_head_pic 图片名
      await this.axios({method: 'get', url: this.certInfo2.cert_head_pic, responseType: 'blob'}).then((res) =>{
        // 重点2
        let blob = res.data;
        let oFileReader = new FileReader();
        oFileReader.onloadend = function(e) {
          base64 = e.target.result
          document.getElementById('cert_head_pic_img')
              .setAttribute('src',base64);
          html2canvas(_this.$refs.certificate2, {
            useCORS: true,
          }).then((canvas) => {
            let base64 = canvas.toDataURL("image/png");
            let fd = new FormData();
            fd.append("pic", base64);
            //  /exam/cert_pic把生成的base64图片传给后端，后端解析
            _this.axios.post("/exam/cert_pic", fd).then((res) => {
              _this.$message.success("恭喜您申请证书成功!");
            });
          });
        };
        oFileReader.readAsDataURL(blob);
      });
      // let base = imgUrlToBase64 ('http://docentp.xlteacher.cn' + this.certInfo2.cert_head_pic)

    },

vue.config.js中代码如下

module.exports = {
  devServer: {
    port: 8000,
    proxy: {
      "/api": {
        target: "http://docentp.xlteacher.cn",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
        //配置图片路径，解决跨域
        "/upload": {
            target: "http://docentp.xlteacher.cn/upload",
            changeOrigin: true,
            pathRewrite: {
                "^/upload": "",
            },
        },
    },
  },
};

页面如下：