相关疑难解决方法(0)

为什么canvas.toDataURL()会抛出安全异常?

我睡眠不足还是什么?以下代码

var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}
Run Code Online (Sandbox Code Playgroud)

抛出这个错误:

SECURITY_ERR: DOM Exception 18
Run Code Online (Sandbox Code Playgroud)

这不可能不起作用!请问有人解释一下吗?

javascript html5 canvas cross-domain

88
推荐指数
4
解决办法
7万
查看次数

浏览器画布CORS支持跨域加载图像处理

问题:哪些浏览器版本支持Canvas中使用的跨域图像的 CORS(跨源资源共享)标头?

CORS可以应用于跨域XMLHttpRequests和图像请求.这个问题是关于图像请求 我常见的浏览器版本兼容性 http://caniuse.com/cors对此问题不清楚,谷歌搜索没有产生好的结果.

我确实找到了一个最近的Chrome开发博客,暗示CORS支持在现代浏览器中广泛传播,但可能因WebGL安全问题而中断.
http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html

关于CORS的更多细节:

我们正在考虑使用canvas和CORS与跨域图像请求的可行性,如W3C工作草案http://www.w3.org/TR/cors/#use-cases中所述.html canvas使用CORS以类似于flash使用crossdomain.xml的方式允许跨域资源使用.基本上,我们想要读取/编辑图像数据像素,我们不想使用相同的原始代理服务器.

通常,如果图像是跨域加载并与html画布一起使用,则使用canvas.toDataURL()等函数访问像素会引发安全性错误.但是,如果提供映像的服务器添加了这样的标头,则应允许跨域使用.

access-control-allow-origin: *
Run Code Online (Sandbox Code Playgroud)

我们最关心的浏览器:

我们计划使用flash来解决IE缺乏画布支持的问题,因此对于有CORS问题的桌面浏览器我们也可以这样做,但是在移动闪存上不是一种选择,并且使用代理来使请求相同来源不是我们的用例中的一个选项.所以,我对Andriod,Iphone,IPAD浏览器对CORS的支持特别感兴趣.

security html5 canvas cross-domain cors

25
推荐指数
1
解决办法
1万
查看次数

标签 统计

canvas ×2

cross-domain ×2

html5 ×2

cors ×1

javascript ×1

security ×1