今天在研究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的问题?
原文地址:https://www.cnblogs.com/luhuaixiang/p/11022803.html
时间: 2024-10-12 15:24:31