当前位置:首页 > javascript > 正文

使用canvas调用getImageData()失败的解决方法

最近在QZone负责m.qzone.com的touch版本开发;前2天碰到一个问题,花费了一些时间,需要总结下:
在HTML5中,比较常用的canvas进行图片处理,生成一个图片可以减少一个HTTP请求;
如下面代码:(假如当前的域名为www.b.com)

很简单的将一个img源的图片转化为canvas图像;在当前域名下,在部分手机下面,比如小米,SAMSUNG的noteII系列自带的浏览器,浏览器头信息如下:
header error
使用getImageData会导致跨域请求,因为安全性问题而使得获取数据失败;错误一般为SECURITY_ERR:DOM Exception 18;
这里想了很多办法,没有办法,只能修改src的源数据;无论是否添加了允许访问的响应头信息(可以使用fiddle增加Add Exten)access control
或者img.setAttribute(‘crossOrigin’,’anonymous’);都没有办法,和浏览器的策略相关,只有绕过将src修改为同一个域下面

使用canvas还有个好处,可以缓存或者合并几张不同的照片;

2 条评论

  1. 板凳2014-07-03 下午3:37
    admin

    img.src = ‘data:image/png;base64,’ + base64的数据源,也可以生成canvas图片

  2. 沙发2014-07-03 下午3:42
    admin

    HTML5 Canvas的Origin-Clean安全原则

    前几天介绍了如何利用toDataURL()将canvas绘制结果转为图档的做法,但实际应用时,却发现常常会冒出奇怪的错误:

    在IE, Chrome或Safari上出现: SECURITY_ERR: DOM Exception 18
    在FireFox则是冒出: 0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)
    原来,跟Cross-Site Scripting的限制一样,HTML canvas也有其安全原则! 简单来说,可想成每个canvas有个origin-clean旗标,一开始预设为true,一旦有下列任一情况发生时,origin-clean旗标即被设为false:

    drawImage()时,使用与document不同来源(origin,跟浏览器跨网域议题裡网域的概念差不多)的image或video作为材料
    drawImage()时,使用orgin-clean=false的canvas作为材料
    fillStyle使用其他来源的image或video作为pattern
    fillStyle使用其他orgin-clean=false的canvas建立的pattern
    strokeStyle使用其他来源的image或video作为pattern
    strokeStyle使用其他orgin-clean=false的canvas建立的pattern
    fillText()或strokeText()使用其他来源的字型
    一旦canvas的orgin-clean旗标被设为false,此时若呼叫toDataURL()、getDataImage()或measureText()等方法,都会引发安全性错误[DOMException.SECURITY_ERR (18)]! 最简单的例子,就是网站A网页上的canvas,在drawImage时,引用了放在网站B的某个图档当作 src,则该canvas就无法再执行toDataURL()了!

发表评论

您必须 [ 登录 ] 才能发表留言!