/*-----------------------------------------IT EYE 祈祷幸福原创,转载请注明。-----------------------------------------*/
今天用canvas的图片数据获取函数:getImageData
var img = new Image();
img.onload = function(){
ctx.drawImage(img, 10, 10);
var imagedata = ctx.getImageData(10, 10, 200, 200);
ctx.putImageData(imagedata, 10, 220); //出错的行
}
img.src = 'imageData.jpg'; //200x200
结果发现在浏览器下都报错,firebug显示的错误是:
Security error" code: "1000
var imagedata = ctx.getImageData(10, 10, 200, 200);
去网上搜了一下,原来这个函数包含着js跨域的问题。
因为本地测试用的图片是文件夹内的,也有可能是一个url,js跨域限制是不能获取非同一域名下的数据的,而本地的位置是没有域名的,url是非同一域名的,所以浏览器都认为你是跨域了,才会报错。
如果一定要测试这个代码,解决办法也容易,我是直接把文件放到了apache根目录,然后localhost访问就OK了。。
参考文章:
http://blog.project-sierra.de/archives/1577
/*-----------------------------------------IT EYE 祈祷幸福原创,转载请注明。-----------------------------------------*/
分享到:
相关推荐
canvas制图 canvas是浏览器提供的绘图机制,使用canvas 标签和js脚本绘图想要绘制的图形
2.40_Canvas与浏览器兼容性|Canvas高级内容2|Canvas图形、动画、游戏开发从入门到精通全系列课程
主要介绍了详解如何解决canvas图片getImageData,toDataURL跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
用于各个浏览器(IE)html2canvas不工作解决方案 html2canvas在火狐、Chrome等浏览器好用,但是IE浏览器无效,导入这个js后就OK啦
主要介绍了canvas 画布在主流浏览器中的尺寸限制详细介绍的相关资料,canvas在不同浏览器下面有不同的最大尺寸限制,这里测试下,需要的朋友可以参考下
通过HTML5中canvas的getImageData()方法制作的在线取色器,对于前端不用再单独打开一个ps之类的软件来取色。 方便快捷,直接保存网址:https://rattenking.github.io/demo/11/index.html
对图片进行90、180、270度的旋转,便于浏览照片
主要介绍了HTML5 Canvas之测试浏览器是否支持Canvas的方法,本文给出了两种原生方法和一个modernizr类库,需要的朋友可以参考下
显示如何通过WebSockets和HTML5 Canvas将WPF应用推送给用户。
canvas例子,如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行,F12可查看源代码。
3.10_getImageData_和_putImageData进行图像的像素级处理|使用Canvas进行像素级操作|Canva
:HTML 5中的canvas有个接口getImageData可以用来从验证码图像中取得像素数据。每一个像素有对应r,g,b,a四个值,r,g,b是红绿蓝三色,a是透明度;观察了一下,接下来说下思路及实现代码,感兴趣的你可不哟啊走开啊
内容概要:canvas案例,色盘、颜色过渡。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
包含的有:...当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。
使用JavaScript和HTML5 Canvas制作的浏览器游戏。 功能包括: 小行星飞过屏幕并环绕 你的船也一样 使用W前进,A左转,D右转,S刹车 按空间射击(子弹受您的速度和方向影响) 当被子弹击中时,大型小行星会分裂成...
效果描述: 本效果使用了html5中的canvas标签 加上特定的一些加上插件,成功的实现了网页首屏图片全屏 且兼容移动网页的效果 鼠标悬停后还有一些动画效果 ... (不兼容低版本浏览器)
NULL 博文链接:https://doubleyoung.iteye.com/blog/1168640