解决-使用html2canvas截取页面时，页面的div背景图无法截取并跨域

Posted 2022-01-08 luhuaixiang

 

　　今天在研究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的问题？