html2canvas截图微信头像

方案一：html代码，利用img标签的crossorigin属性

<img v-if="''!=wxAvatar" class="avatar" :src="wxAvatar" crossorigin="anonymous">

微信头像，指向微信的头像地址，跨域请求资源，资源可以显示，但是html2canvas会有跨域的问题，主要利用是 crossorigin="anonymous"，使html2canvas可以截取到该标签

如果是自己的服务器上的图片，要提供给其他域名下的页面，crossorigin="annoymous"可能导致错误，这个时候把自己的服务器上访问图片的那段请求加上add_header Access-Control-Allow-Origin *;配置，（这是nginx服务器上的配置）。但也要注意资源可能被随意下载，所以可以只在需要公开的目录加上这个配置。

 

方案二：js代码，下载图片，并读取为base64格式，然后设置为img的src

    createPosterImage:function(base64data){

      this.wxAvatar = base64data
      
      this.html2canvas(
        document.getElementById('postCanvas'), {
          useCORS:true
        }
      ).then(canvas => {
        this.posterUrl = canvas.toDataURL('image/png')
        this.loading = false
      });

    }, 
    downloadAvatar:function(url, callback){
      var httpRequest = null;
      if (window.XMLHttpRequest) // 除了IE外的其它浏览器
      {
          httpRequest = new XMLHttpRequest();
      }else{
          httpRequest = new ActiveXObject("MsXml2.XmlHttp");
      }
      httpRequest.responseType = "blob";
      httpRequest.onreadystatechange = function(){
          if ( httpRequest.readyState == 4 ){
              if ( httpRequest.status == 200){
                  var value = this.response;
                  // var blob = window.URL.createObjectURL(value);
                  var reader = new window.FileReader();
                  reader.readAsDataURL(value);
                  reader.onloadend = function() {
                      var base64data = reader.result;
                      if (callback){
                          callback(base64data);
                      }
                  };

              }
          }
      };
      httpRequest.open('GET', url, true); 
      httpRequest.send(null);
      
    }, 

调用就是this.downloadAvatar(this.wxAvatar, this.createPosterImage)