"Unable to get image data from canvas ...by cross-origin data"问题产生原因及解决办法_MySQL, Oracle及数据库讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  MySQL, Oracle及数据库讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 2325 | 回复: 0   主题: "Unable to get image data from canvas ...by cross-origin data"问题产生原因及解决办法        下一篇 
napolenAx
注册用户
等级:少校
经验:802
发帖:118
精华:1
注册:2011-8-30
状态:离线
发送短消息息给napolenAx 加好友    发送短消息息给napolenAx 发消息
发表于: IP:您无权察看 2015-4-3 16:20:24 | [全部帖] [楼主帖] 楼主

一、问题描述:
在支持html5的浏览器中运行javascript脚本,脚本主要是操作网页上的标签canvas,出错的操作为, getImageData(img,……),  
chrome 下出错信息为:"Unable to get image data from canvas because the canvas has been tainted by cross-origin data",
fireFox 下出错信息为: "Security error" code: "1000"

关键代码如下所示:                  

 init:function(){
var img=new Image();
img.src="http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0";
var ctx=this.context3D;
img.onload=function(){
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,img.width,img.height); //出错行
ctx.putImageData(imgData,50,50);

}; },


二、探索与解答
在网上搜索时发现大部分都说的是,getImageData这个函数,必须在服务器端运行,如果没有服务器环境(比如,只是一个本地的 html网页,操作本地的一张图片),就会报"Unable to get image data from canvas because the canvas has been tainted by cross-origin data"错误。
但是很明显的,我上面的示例程序是运行在一个 tomcat服务器中的,仍然报了这个错误。那么这个问题到底是怎么回事呢?
后来在stackoverflow上找到了问题的原因。
为了阻止欺骗,浏览器会追踪 image data。当你把一个“ 跟canvas的域不同的”图片放到canvas上,这个canvas就成为 “tainted”(被污染的,脏的),浏览器就不让你操作该canvas 的任何像素。这对于阻止多种类型的XSS/CSRF攻击(两种典型的跨站攻击)是非常有用的。
上面的话中关键点在于红色标记出的文字“跟canvas的域不同的”, 于是我查看了我的图片请求与网页请求的地址,发现它们的域果然是不同的,
图片请求地址:http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0
输入浏览器中的网页的地止为:http://summer1:8080/hadoopWebGis2/jsp/map3D.html

(虽然在hosts文件中配置的影射为:10.0.5.199:summer1,按理说会浏览器会自动对两者进行转换的,却不知为什么,还是识别成了不同的域。)
修改为如下后,问题解决: 

图片请求地址:http://summer1:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0
输入浏览器中的网页的地止为:http://summer1:8080/hadoopWebGis2/jsp/map3D.html
-----------------或者-------------------------
图片请求地址:http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0
输入浏览器中的网页的地止为:http://10.0.5.199:8080/hadoopWebGis2/jsp/map3D.html

 ---------------------------------------------------------------------------------------------------------------------------------------------------------


题外话:为什么没有服务器环境(比如,只是一个本地的 html网页,操作本地的一张图片),就会报"Unable to get image data from canvas because the canvas has been tainted by cross-origin data"错误 ?

个人理解:本地网页的域为file://,如:file:///home/summer/Desktop/test.html ,而本地图片肯定不是以file://开头的,如linux环境下的某个图片为:/home/summer/Desktop/test.png,windows环境下的某个图片为: c:\tmp\test.png。

--转自 北京联动北方科技有限公司




赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论