IT技术互动交流平台

关于跨域图片资源权限相关资料的详细介绍大全

作者:whl  发布日期:2018-11-11 08:41:00

  对于跨越图片资源权限(CORS enabled image)这方面的知识很多人都表示不清楚,也不知道哪些才是自己需要了解的。小编查询了很多相关资料把有价值的部分整理了出来,希望能给大家作为参考进行学习,下面大家就滑动鼠标往下拉一起看看这些内容吧!

  HTML 规范文档为 images 引入了 crossorigin 属性, 通过设置适当的头信息 CORS , 可以从其他站点加载 img 图片, 并用在 canvas 中,就像从当前站点(current origin)直接下载的一样.

  crossorigin 属性的使用细节, 请参考CORS settings attributes.

  什么是 “被污染的(tainted)” canvas?

  尽管没有CORS授权也可以在 canvas 中使用图像, 但这样做就会污染(taints)画布。 只要 canvas 被污染, 就不能再从画布中提取数据, 也就是说不能再调用 toBlob(), toDataURL() 和 getImageData() 等方法, 否则会抛出安全错误(security error).

  这实际上是为了保护用户的个人信息,避免未经许可就从远程web站点加载用户的图像信息,造成隐私泄漏。

  示例: 从其他站点保存图片

  首先, 图片服务器必须设置相应的 Access-Control-Allow-Origin 响应头。添加 img 元素的 crossOrigin 属性来请求头。比如Apache服务器,可以拷贝HTML5 Boilerplate Apache server configs 中的配置信息, 来进行回应:

其他站点保存图片

  这些设置生效之后, 就可以像本站的资源一样, 保存其他站点的图片到 DOM存储 之中(或者其他地方)。

DOM存储

  浏览器兼容性

  Desktop

浏览器兼容性

  Mobile

Mobile

  另请参见

  Chrome:在WebGL中使用跨域图片

  HTML规范-crossorigin属性

  上文给大家简单的介绍了crossorigin 属性还有被污染的(tainted),相信大家对于跨越图片资源都有了更深入的了解吧?只要大家能够把这些知识融汇贯通,那么将对未来的学习更加有所帮助。好了,今天的介绍就到这里了,如果大家觉得对自己有用的话赶紧收藏起来吧!

延伸阅读:

Tag标签: 跨域图片资源  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规