如何解决 getImageData 跨域问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Dive into HTML5

› http://diveintohtml5.org/

这是一个创建于 3440 天前的主题，其中的信息可能已经有所发展或是发生改变。

项目需要用HTML5的getImageData方法实现图片的一些特效，在本地测试没问题，放到cdn上浏览器提示跨域，即使用二级域名也不行，图片数量很多，因此必须放到cdn上，请问如何解决？

8 条回复 • 2015-07-24 17:59:39 +08:00

leojoy710

2015-07-23 16:53:10 +08:00

这东西不是拿canvas里面的信息的么...为什么会有跨域...

danube533

2015-07-23 16:56:01 +08:00

@leojoy710 拿外部的图片。。。

leojoy710

2015-07-23 16:57:31 +08:00

img图片过来然后画到canvas里面然后再拿?

danube533

2015-07-23 17:08:47 +08:00

@leojoy710 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

leojoy710

2015-07-23 17:11:29 +08:00

...这是第一次知道...
不如给图片加CORS吧... 一般CDN也不会修改头...

yyy

2015-07-23 17:25:46 +08:00

1、图片的相应头要有 Access-Control-Allow-Origin:*
2、js代码里有类似这样的
var img = new Image();
img.crossOrigin = '';
img.src = src;

crossOrigin必须在src之前声明。

danube533

2015-07-24 17:24:16 +08:00

@yyy 又报错了
Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0

yyy

2015-07-24 17:59:38 +08:00

@danube533 那就给img对象加上个宽度属性。