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

原文地址:https://www.cnblogs.com/luhuaixiang/p/11022803.html

时间: 2024-10-12 15:24:31

解决-使用html2canvas截取页面时,页面的div背景图无法截取并跨域的相关文章

页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置

当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: 第一种方案 将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下: js代码: <script> var _h = 0; function SetH(o) { _h = o.scrollTop SetCookie("a&q

UIButton的selected设为TRUE时在按下时显示自定义的背景图

在UIButton的selected设为TRUE后,需要在按钮高亮时,显示自定义的背景图. 经研究hightLighted和selected这两个状态是可以重叠的,就是button可以同时处于selectec和highlighted两个状态下. 从UIControlState的定义也可以看出: typedef NS_OPTIONS(NSUInteger, UIControlState) { UIControlStateNormal       = 0, UIControlStateHighlig

坑人的MyEclipse之-修改JSP页面的JavaScript背景颜色

MyEclipse开发JSP页面时,如果要写JavaScript代码, 背景颜色默认是白色!效果如下: 这种反人类的设计我已经无力吐槽了!要改为黑色的话可以通过下面的方法设置:

Flex转型Html学习随笔1——关于Html页面的div布局(下)

之前研究了div的垂直和水平布局,接下来研究下Flex中Group(Canvas)的类似效果在div中如何实现. 关键字:position 吸取了之前float:left设置在父容器中没有效果的教训,这个position:absolute果断先设置在子元素上 <body> <div class="redRect"> <div class="blueRect" style="position:absolute;left:20px

实现页面的div小提示层

<style> /*实现小提示框*/ .w{ width:200px; position:relative; background:#999; left:70%; top:10px; font-size:12px; text-align:left} .x{ width:180px; position:relative; background:#ff9; border:1px solid #F96; padding:10px; left:-4px; top:-4px;} .y , .z{posi

使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题

一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

grunt-connect-proxy解决开发时跨域问题

最近的项目中前后端是完全分离开发的,前端用grunt管理项目.这样就会导致一个问题:开发时前端调用后台的接口时因为不在一个服务器,所以会出现跨域问题.但是也不能用JSONP或CROS方式实现真正的跨域,因为项目发布时其实是在同一个服务器下的. 这时候我们的grunt-connect-proxy就出场了,它就是专门解决这个问题的. 具体配置: 1. 先下载安装这个组件 npm install grunt-connect-proxy --save-dev 这里要注意:一定要提前先装上grunt-co

chrome浏览器下用jQuery的load函数来跨域加载页面,响应状态status为(canceled)是什么情况? JSON和JSONP,也许你会豁然开朗,含jQuery用例

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 问题来源:http://q.cnblogs.com/q/63123/ 问题出现的环境: 1:两个domain相同端口号不同的域名. 2:MVC4.0框架 3:从一个域名下用  jQuery.load("另一个域名下的页面"): 4:响应失败 : 响应状态status为(canceled) 请问这是什么情况呢 ?  我在IE下就没问题,可以

JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的