html2canvas - 解决办法之图片跨域导致的截图空白

解决方案  前期npm,import  就不用说了哈

 

1. 后端支持：图片要是cdn上的地址，并且允许图片跨域，header头中设置应为

　　Access-Control-Allow-Origin:  *

2,前端配置如下   "appcode"是后台的图片地址

 <div class="capture" ref="imageDom">
     <div class="codebox">
        <img :src="appcode+'?'+new Date().getTime()" crossorigin="anonymous" alt />
     </div>
     <p>{{appname}}</p>
     <div class="photobox">
         <img :src="appphoto+'?'+new Date().getTime()" crossorigin="anonymous" alt />
     </div>
 </div>

​
  async html2picture() {
      // 将html转化为canvas
      const canvas = await html2canvas(this.$refs.imageDom, {
        useCORS: true, // 支持跨域
        logging: false //日志开关，便于查看html2canvas的内部执行流程
      });
      let baseurl = canvas.toDataURL("image/jpg"); //将canvas转化为base64的jpg（可自行设置格式）
      const a = document.createElement("a");
      // 文件名
      a.download = name | "html2canvas";
      // 设置 a href 属性
      a.setAttribute("href", baseurl);
      // 触发 a 点击事件
      a.click();
    }

​