vue的html2canvas將dom轉化為圖片時踩得坑

一、html2canvas中圖片涉及跨域圖片

應用場景:做個投票活動，將參賽者的信息轉化成圖片截圖分享。用戶上傳圖片上傳到騰訊雲cos桶中，html2canvas只能轉換本地資源的圖片，涉及跨域的圖片無法轉換、

解決方法：通過nginx代理轉發，

假設你的網站是   http://www.helloworld.com  

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

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

這樣訪問http://www.helloworld.com/cosImageUrl就代理成https://dingzi-1258648408.cos.ap-chengdu.myqcloud.com/

1. 配置nginx,在80端口下的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. 圖片地址換成http://www.helloworld.com/cosImageUrl/upload/f49a6da3-73ea-422a-9b63-7a3e522130e2.png 
3. vue文件中

    <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();
         });
       },
   

    

　　二、轉化圖片后截取部分背景圖模糊，圖片有空白部分

1. 　　展示太快，內容沒有加載完，解決方法：設置延時

    setTimeout(() => {
        html2canvas(）
   }，500）

    

2. 內容太多，html2canvas是根據body進行截圖，若內容高度高於body時，就會出現這樣的問題(大概意思就是有滾動條時造成的)   解決方法：講滾動條置頂

   window.pageYOffset = 0;
   document.documentElement.scrollTop = 0
   document.body.scrollTop = 0

    

3. 設置生成圖片的大小

   html2canvas(that.$refs.imageWrapper,{useCORS: true,
                            width:window.screen.availWidth,  //canvas寬度
                           height:window.screen.availHeight, //canvas高度
                            windowWidth:document.body.scrollWidth, //獲取X軸方向滾動條內容
                            windowHeight:document.body.scrollHeight/1.06,//獲取Y軸方向滾動條內容
                            x:0,//頁面在水平方向滾動的距離
                           y:0,//頁面在垂直方向滾動的距離
                       }).then(canvas => {
                           let imgUrl1 = canvas.toDataURL('image/png');
                           that.dataURL = imgUrl1;
                           that.firstFlag = false;
                           // this.firstFlag = false;
                       }).catch(error => {
                       }）