解决-使用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的问题？