When vue of html2canvas dom into the picture, Tencent cloud picture address blank.

Scenario: be voting, will be converted into a picture information participants share screenshots. Tencent users to upload pictures uploaded to the cloud cos bucket, html2canvas only convert local resources picture, involving cross-domain images can not be converted,

Workaround: nginx proxy forwarding,

Suppose your website is http://www.helloworld.com  

The https://dingzi-1258648408.cos.ap-chengdu.myqcloud.com/upload/f49a6da3-73ea-422a-9b63-7a3e522130e2.png

Replaced http://www.helloworld.com/cosImageUrl/upload/f49a6da3-73ea-422a-9b63-7a3e522130e2.png 

Acting on this visit http://www.helloworld.com/cosImageUrl into https://dingzi-1258648408.cos.ap-chengdu.myqcloud.com/

1. Configuration nginx, add an entry in a port 80 in localtion

   location /cosImageUrl/ { 
      proxy_http_version 1.1;
      proxy_pass https://dingzi-1258648408.cos.ap-chengdu.myqcloud.com/; 
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
      add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
      add_header Access-Control-Allow-Credentials true;
     }
   

   　　

2. Picture Address replaced http://www.helloworld.com/cosImageUrl/upload/f49a6da3-73ea-422a-9b63-7a3e522130e2.png 
3. vue file

    <div ref="imageWrapper" v-if="firstFlag"></div>
   <div class="show_img">
             <img  :src="dataURL" alt="" v-if="!firstFlag" style="width: 100%">
   </div>
   

   　　

   import html2canvas from "html2canvas"
   
   export default {
       name: "share",
       data() {
         return {
           firstFlag: true,
           dataURL: '',
         }
       },
       methods: {
           toImg() {
           html2canvas(this.$refs.imageWrapper,{useCORS: true}).then(canvas => {
             let imgUrl = canvas.toDataURL('image/png');
             this.dataURL = imgUrl;
             this.firstFlag = false;
           }).catch(error => {
           })
         },
       },
       mounted() {
         const that = this;
         that.$nextTick(function () {
           that.toImg();
         });
       },