解決-使用html2canvas截取頁面時，頁面的div背景圖沒法截取並跨域

 

　　今天在研究html2canvas截取頁面的時候，發現截取後的圖片沒有把應該截取元素的背景圖片截掉，背景圖片空白。此時谷歌瀏覽器控制檯報Failed to load resource: net::ERR_CACHE_MISS 和圖片跨域的錯誤。

　　使用了useCORS: true後仍是沒法解決這個問題。因而就本身想辦法，既然不一樣域名下的圖片會有跨域問題，那麼將圖片轉成base64後會不會還有跨域問題。說幹就幹！

　　首先在網上找到了如何將網絡圖片轉成base64的方法（搬磚使我快樂）,

　　

 getBase64Image(img) {
      let canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
      let dataURL = canvas.toDataURL("image/" + ext);
      return dataURL;
    },

　　而後將請求到的背景圖片轉成base64，

　　

let imgUrl = datas.backgroundImg == null ? "" : datas.backgroundImg; //請求到的圖片路徑
          if (imgUrl != "") {
            this.imgUrl = imgUrl;
            let image = new Image();
            image.src = imgUrl + "?v=" + Math.random(); // 處理緩存
            image.crossOrigin = "*"; // 支持跨域圖片
            image.onload = function() {
              let base64 = self.getBase64Image(image); //調用函數並將其轉爲base64圖片
              $("#mains").css({
                "background-image": "url('" + base64 + "')",
                "background-size": "100% 100%",
                "background-repeat": "no-repeat"
              });
            };
          }

　　大功告成，一試發現果真能夠。值得一說的是 這個問題我只在谷歌遇到，可是在火狐瀏覽器就沒有這樣的問題，是不是谷歌自帶的no-store和no-cache的問題？