前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

跨域图片(CANVAS)

HTML<canvas>元素标签也依赖于CORS来加载/显示来源不同(不同域)的图片。

Canvas 是HTML5中引进的标签。用来在javascript图形生成,图片加载。

图片可以存储在同一服务器或者不同服务器。通过Canvas都可以显示。

不同之处在于跨域图片(cross-origin image)会污染/损伤canvas。

Tainting a canvas

意味着canvas提取不到图片数据啦。

<canvas>对外提供3个萃取数据的方法:

toBlob, toDataURL, getImageData

以上方法都返回二进制(binary)的图片数据。

利用canvas的这些方法加载同源(same-origin)图片,一切都会正常显示。

但是如果canvas显示/请求一个跨域图片(cross-image),浏览器会报错。

回避这个错误,图片必须标记“corss-origin"。


crossOrigin属性有2个值:anonymous和user-credentials。

设定为anonymous值的话,不会在request/请求中携带任何cookie。

跨域图片正常显示的前提,服务器端必须允许图片的跨域请求。



参考文献:CORS in action

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言