canvas教程

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

字号+ 作者:H5之家 来源:H5之家 2017-07-18 17:07 我要评论( )

最近在QZone负责m.qzone.com的touch版本开发;前2天碰到一个问题,花费了一些时间,需要总结下:

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()了!

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • canvas上纯JS实现可滑动时间刻度轴

    canvas上纯JS实现可滑动时间刻度轴

    2017-07-19 10:03

  • canvas draw mac (平面设计软件)V3.0.4 破解版

    canvas draw mac (平面设计软件)V3.0.4 破解版

    2017-07-18 17:00

  • HTML5(Canvas Vedio Audio 拖动)

    HTML5(Canvas Vedio Audio 拖动)

    2017-07-18 13:14

  • HTML5 Canvas八大核心技术及其API用法

    HTML5 Canvas八大核心技术及其API用法

    2017-07-18 12:00

网友点评