标签：网络图片 case 控制台 函数 get oda 如何 图片路径 document
今天在研究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的问题？
解决-使用html2canvas截取页面时，页面的div背景图无法截取并跨域
标签：网络图片 case 控制台 函数 get oda 如何 图片路径 document
原文地址：https://www.cnblogs.com/luhuaixiang/p/11022803.html
