html2canvas截图如何解决跨域的问题? 50C

1、问题描述
如果不跨域的话,截图正常。

如果有跨域的图片,那么js报错,报错信息如下:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

2、代码

 /**
 * 截图
 */
function doScreenShot(){
    html2canvas(document.body, {
        onrendered: function(canvas) {
            canvas.id = "mycanvas";      
            var image =canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
            window.location.href=image; // it will save locally
        }
    });
}

3、补充
看到官方(https://github.com/niklasvh/html2canvas)上面有介绍代理啥的,也没看明白怎么使用,好像还没有java方面的代理。有人能补充一下这方面的使用介绍么?

或者有其他的web页面截图方面的方法也可以介绍下,谢谢~


附:
html2canvas
1、官网
https://github.com/niklasvh/html2canvas
2、这个是别人发的提问帖子,问的同样的问题,提问的人说他问题已经解决了,我他妈楞是没看懂啊http://stackoverflow.com/questions/9825962/how-to-use-html2canvas-proxy

6个回答

我做的也是地图项目,实现不了。
在网上看了好多示例,有说用代理的,还有的说的是:在跨域的服务器上设置header设置为允许跨域请求。结果也没反应。
楼主解决问题了吧。请教一哈

qq_14877151
qq_14877151 请问解决了吗这个问题
2 年多之前 回复

内容有外域的图片

 <img src="http://avatar.csdn.net/7/B/2/3_showbo.jpg"/>

需要修改img地址为你网站的代理页面,如xxx.jsp,然后发送跨域页面url地址到xxx.jsp,xxx.jsp复制将远程图片下载,这样就同源了才能绘制出图片内容

  <img src="xxx.jsp?imgurl=http://avatar.csdn.net/7/B/2/3_showbo.jpg"/>

参考
java 下载网络上的图片并保存到本地目录:http://takeme.iteye.com/blog/1683380

B_qxzb
B_qxzb html2canvas 1、官网 https://github.com/niklasvh/html2canvas2、这个是别人发的提问帖子,问的同样的问题,提问的人说他问题已经解决了,我他妈楞是没看懂啊http://stackoverflow.com/questions/9825962/how-to-use-html2canvas-proxy
4 年多之前 回复
B_qxzb
B_qxzb 谢谢。我们做的是地图项目,高德地图上面有成千上万的图标,每个图标都是跨域的,难道都要下载么?
4 年多之前 回复

在 java程序里面的http请求代理是这样的 HttpClient httpClient=new HttpClient();
httpClient.getHostConfiguration().setProxy("ip地址", 端口)

楼主问题解决了嘛 请教一下

在html2canvas.js源代码的 loadImage方法里添加 img.crossOrigin = "anonymous";
原来是 if (src && images[src] === undefined) {
img = new Image();
if (src.match(/data:image\/.*;base64,/i)) {
改为 if (src && images[src] === undefined) {
img = new Image();
img.crossOrigin = "anonymous";
if (src.match(/data:image\/.*;base64,/i)) {

楼主问题解决了嘛 请教一下
跟一波贴哈哈哈哈

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

html2canvas截图如何解决跨域的问题?

html2canvas截图如何解决跨域的问题?用html2canvas.js截屏时,不在同一域名下的图片不显示!

急!!!!!!!!!!!!!! html2canvas跨域问题

功能需求如下: 在页面上点击按钮,解析iframe里面嵌入的页面,然后生成图片,通过HTML5 的canvas 实现一个画板涂鸦功能。 急!!!!!!!!!!!!!! 最近遇到个问题,需要自动捕获页面然后生成图片,使用的最新版的html2canvas,实现后,项目本地的html都可以解析,但是现在涉及到跨域问题,由于集成的系统比较多,然后无法使用nginx代理的方式实现,现在求大神帮忙解决解决,这个问题困扰了我很多天,试了很多种办法,请求援助~ 如果有大神,可以QQ联系我,晚上可能不在CSDN上,QQ:1492138976,C币一定结!!!!

请问canvas跨域问题如何解决

var ctx = canvas.getContext('2d'); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); 如果canvas中的图片源的url(http://10.4.60.44:7002/......)与当前应用的url(http://10.4.60.44:7003/......)不相同, 浏览器控制台出现: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.,请问该如何解决呢?

canvas画布跨域问题 苹果端

canvas 画布将多张图片拼凑, 使用 toDataURL 时出现跨域报错, 加上 headImg.crossOrigin = ”*“之后 在安卓端可以正常显示, 但是在 chrome以及苹果端 还是有跨域报错 不能正常显示图片 求解决方案。

html2canvas 截图出来的总有一点模糊

``` var content = document.getElementById("content"); var _width = $('#content').width(), _height = $('#content').height(); var canvas = document.createElement("canvas"); var scale = 5.5; //放大倍数 canvas.width = _width * scale; canvas.height = _height * scale; canvas.getContext("2d").scale(scale, scale); html2canvas(content, { backgroundColor: '#FFFFFF', //设置截图的背景色 useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题 allowTaint: true, //允许跨域(图片跨域相关) taintTest: true, //是否在渲染前测试图片 scale: scale, canvas: canvas, width: _width, heigth: _height, dpi: window.devicePixelRatio * 96, onrendered: function(canvas) { var context = canvas.getContext('2d'); // 【重要】关闭抗锯齿 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; var dataUrl = canvas.toDataURL("image/png", 1.0), newImg = document.createElement("img"); newImg.src = dataUrl; $('#pdf_png').empty().append(newImg); // newImg.style.width = '100%'; // 方向默认竖直,尺寸ponits,格式a4[595.28,841.89] // var pdf = new jsPDF('', 'mm', 'a4'); // pdf.addImage(dataUrl, 'JPEG', 0, 0, 210, 297) // pdf.save(new Date().getTime() + '.pdf'); } }); ``` 效果图:![图片说明](https://img-ask.csdn.net/upload/202003/05/1583372707_536741.png) 哪位大佬者能推荐什么方法。 或者能远程帮忙代写,截取高分辨率图片,导出pdf能打印直接用的,有偿! QQ 919900480

微信头像 图片跨域问题

最近在做一个h5页面分享需要截图,用了html2canvas 这个插件,普通的图片可以显示, 但是一旦是微信头像,就会出现跨域的问题,但本地谷歌浏览器可以显示,微信和qq浏览器不行。不知道怎么解决。。

html2canvas在360浏览器兼容模式下报错问题

需求是将页面上的一张图表做前端导出,我用到了两个插件,一个是html2canvas进行截图,还有一个是jspdf生成pdf文件并且保存到本地 firefox和chrome都已经通过测试了,360的兼容模式下不能正常跑。 代码跑到这里的时候会报错: html2canvas($("#vm0"), { onrendered: function (canvas) { $(canvas).attr({"style":"margin-top:10px;","id":"vm0_save"}) $("#realchart").append(canvas); } }); 刚开始浏览器控制台抛出这个错误: ![图片说明](https://img-ask.csdn.net/upload/201706/19/1497850918_99930.png) 下了一个es6-promise依赖包,然后在html2canvas.js最上面加了一句: var Promise = require('es6-promise').Promise; 这个报错就不再出现了,但是随之而来的是下面这个报错: ![图片说明](https://img-ask.csdn.net/upload/201706/19/1497851219_728316.png) 然后就没有什么头绪解决了,有遇到过这个问题的大神吗? 另外发现html2canvas的坑挺多的,有没有可以替代它的插件

如何解决iframe的跨域问题

现在我是通过iframe调用的天气预报 调用代码: <div class="huanying"><iframe width="450" scrolling="no" height="25" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=1&color=%23FFFFFF&icon=1&wind=1&num=1"></iframe></div> ![图片说明](https://img-ask.csdn.net/upload/201501/30/1422604936_841826.png) 我想修改iframe中嵌套网站的温度的颜色,我在火狐上看的代码是: ![图片说明](https://img-ask.csdn.net/upload/201501/30/1422604595_19268.png) 我不知道如何控制温度上css样式,求指教,谢啦啊

vue中用html2canvas转换图片 图片不完整 或有偏移 有空白区域

``` html部分 <div style="height: 312px;overflow:hidden"> <div class="parter" id="parter" ref="parter"> <div class="qrcode" id="qrcode"></div> <p class="copywriting">{{changeText}}</p> </div> </div> ``` ``` js部分 html2canvas(document.getElementById('parter'), { width: 300, height: 300, backgroundColor: null, useCORS: true, // 允许图片跨域 taintTest: true, // 在渲染前测试图片 timeout: 500 // 加载延时 }).then(canvas => { canvas.toBlob((blob) => { saveAs(blob, '桌贴.png') }) }) ``` ![图片说明](https://img-ask.csdn.net/upload/201908/03/1564815559_206721.png) 导出的图片网上偏移

html2Canvas 在ios+4g+微信内置浏览器错误

开发了一个webapp,用到了html2canvas。 测试下来: ios、Android + WiFi + 浏览器/微信= 正常 Android + 4G + 浏览器/微信 = 正常 ios + 4G + 浏览器 = 正常 只有 ios + 4G + 微信 = 错误 可能是什么问题呢?微信浏览器有什么针对ios 4g的设置吗?

canvas的drawImage出现的问题

如下是我的全部代码,在谷歌浏览器中运行,但是canvas就是画不出图片。求大神指点,哪里写的有问题? ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="root"> </div> <img id="preview" src="http://img02.tooopen.com/images/20140504/sy_60294738471.jpg" /> <script> var img = document.getElementById('preview'); document.getElementById('root').appendChild(convertImageToCanvas(img)); function convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.setAttribute('style','border:1px solid #000'); canvas.getContext("2d").drawImage(image, 0, 0); canvas.width = image.width; canvas.height = image.height; return canvas; } </script> </body> </html> ```

js用什么实现视频通话过程中截图

各位大佬,目前使用的第三方的视频sdk,要求视屏过程中点击可截图并保存下来,还能标点乱涂乱画的那种,目前就了解到可以用canvasJS便利的实现截图,但是截视频画面就不得行,是不是要牵扯跨域问题呀, 这个跨域是不是更常规处理跨域那种处理?或则还有没其他技术可以实现这个功能的,跪求各位大佬,要睡在公司了!!html+js后台用的Java

求一个支持跨域截图的控件

公司是做土地管理系统的,之前用的控件是Html2Canvas,但是它不支持跨域, 所以想找一个支持跨域的截图控件!!求推荐。。。。。。。。。。

如何用javascript 跨域获取iframe子页面的元素信息?

RT,如何用javascript 跨域获取iframe子页面的元素信息? [b]比如我在我的parent.jsp里面,用iframe引入了www.baidu.com作为子页面,那我如何在parent.jsp里面获得百度中,元素名字为test的div指定属性信息?能不能修改?[/b] 另外,[b]如果通过创建chrome扩展程序的方式,能不能在程序里面获得作用页面中的元素数据?[/b]

跨域ajax请求[关闭]

<div class="post-text" itemprop="text"> <aside class="s-notice s-notice__info js-post-notice mb16" aria-hidden="false" role="status"> <div class="grid fd-column fw-nowrap"> <div class="grid fw-nowrap"> <div class="grid--cell mr8"> <svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg> </div> <div class="grid--cell fl1 lh-lg"> <div class="grid--cell fl1 lh-lg"> It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, <a href="/help/reopen-questions">visit the help center</a>. </div> </div> </div> <div class="grid--cell mb0 mt8">Closed <span title="2012-09-11 17:35:35Z" class="relativetime">7 years ago</span>.</div> </div> </aside> <p>Cross domain ajax requests are denied, but I can around it by this:</p> <pre><code>$(document).ready(function () { var data = ...; $('&lt;img&gt;').attr('src', 'http://domain.com?data=' + escape(data)).appendTo('body'); }); </code></pre> <p>So if I really want I can <strong>send</strong> data to another domain. Also I can <strong>get</strong> data the same way, but on load I can for example move it on canvas and then read pixels.</p> <p>So what is the point in this restriction and what it can save from?</p> </div>

利用three.js导入3d模型失败

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>lesson1-by-shawn.xie</title> <!--引入Three.js--> <script src="Three.js"></script> <script src="OBJLoader.js"></script> <script type="text/javascript"> //开启Three.js渲染器 var renderer;//声明全局变量(对象) function initThree() { var element = document.getElementById("canvas3d"); width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽 height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象(属性:抗锯齿效果为设置有效) renderer.setSize(width, height );//指定渲染器的高宽(和画布框大小一致) document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。 renderer.setClearColor(0x000000, 1.0);//设置canvas背景色(clearColor) } //设置相机 var camera; function initCamera() { camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 500 );//设置透视投影的相机,默认情况下相机的上方向为Y轴,右方向为X轴,沿着Z轴朝里(视野角:fov 纵横比:aspect 相机离视体积最近的距离:near 相机离视体积最远的距离:far) camera.position.x = 50;//设置相机的位置坐标 camera.position.y = 10;//设置相机的位置坐标 camera.position.z = 25; camera.up.x = 0;//设置相机的上为「x」轴方向 camera.up.y = 0;//设置相机的上为「y」轴方向 camera.up.z = 1;//设置相机的上为「z」轴方向 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标 } //设置场景 var scene; function initScene() { scene = new THREE.Scene(); } //设置光源 var light; function initLight() { light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源 light.position.set( 200, 200, 200 );//设置光源向量 scene.add(light);// 追加光源到场景 } //导入模型 var loader; function initObject(){ loader=new THREE.OBJLoader(); loader.load('male02.obj',function(object){ scene.add(object);}); } //执行 function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); } //threeStart(); </script> <style type="text/css"> div#canvas3d{ border: none; cursor: move; width: 1400px; height: 600px; background-color: #EEEEEE; } </style> </head> <body onload='threeStart();'> <!--盛放canvas的容器--> <div id="canvas3d"></div> </body> </html> 利用three.js导入obj模型,发现无法显示,请各位大神帮忙看下问题出在哪?利用chorme和firefox分别得到如下提示![图片说明](https://img-ask.csdn.net/upload/201709/20/1505914725_165217.png)![图片说明](https://img-ask.csdn.net/upload/201709/20/1505914742_786938.png)

【百度地图】百度地图导出图片

想把当前页面的百度地图导出图片格式,地图上面有路线信息,我使用html2canvas了,在处理百度地图的时候,会出现跨域安全问题,还有就是百度地图是多个图片切拼成。求指教好的办法或思路。

uniapp 的图片上传uni.uploadFile

配置了反向代理为什么上传的时候还会报跨域呢?![图片说明](https://img-ask.csdn.net/upload/202004/17/1587112773_788073.png) 网上查了一下说是非简单请求,这个反向代理是管不了的吗,只有后台来进行配置吗?

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

Python可以这样学(第一季:Python内功修炼)

Python可以这样学(第一季:Python内功修炼)

C++语言基础视频教程

C++语言基础视频教程

相关热词 c# 按行txt c#怎么扫条形码 c#打包html c# 实现刷新数据 c# 两个自定义控件重叠 c#浮点类型计算 c#.net 中文乱码 c# 时间排序 c# 必备书籍 c#异步网络通信
立即提问