欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:22选5河南最新开奖今 > WEB标准 >

??解释如何解决画布图像getImageData,toDataURL跨域问题

22选5河南最新开奖今 www.gsf5k.cn  一、首先,图片服务器需要配置Access-Control-Allow-Origin

一般团队都会有一个专门域名放置静态资源,例如腾讯是gtimg.com,百度是bdimg.com;或者很多团队使用的是腾讯云或者阿里云的服务。

而主页面所在域名往往不一样,当需要需要对canvas图片进行getImageData()或toDataURL()操作的时候,跨域问题就出来了,而且跨域问题还不止一层。

首先,第一步,图片服务器需要配置Access-Control-Allow-Origin信息,例如:

如PHP添加响应头信息,*通配符表示允许任意域名:

header("Access-Control-Allow-Origin: *");

或者指定域名:

header("Access-Control-Allow-Origin: www.zhangxinxu.com");

此时,Chrome浏览器就不会有Access-Control-Allow-Origin相关的错误信息了,但是,还会有其他的跨域错误信息。

二、canvas图片getImageData cross-origin跨域问题

对于跨域的图片,只要能够在网页中正常显示出来,就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步,通过getImageData()方法获取图片的完整的像素信息,则多半会出错。

举例来说,使用下面代码获取github上的自己头像图片信息:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var img = new Image();
img.onload = function () {
    context.drawImage(this, 0, 0);
    context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';';

如需转载,请注明文章出处和来源网址://www.gsf5k.cn/w3c/w50970.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
22选5河南最新开奖今文章修订日期:2018-10-23 14:06 原创:22选5河南最新开奖今
本文22选5河南最新开奖今 www.gsf5k.cn DIVCSS5版权所有。

  • 【新时代 新作为 新篇章】特色枣木香菇畅销市场 2019-03-26
  • 专家写的都是错误的,都是自己闭门造车,想出来的。 2019-03-26
  • 夏季频现恶犬伤人 三种情形算清账     2019-03-25
  • 凤凰大调查——倾听你理想中的湾区生活 ——凤凰网房产深圳 2019-03-25
  • 震后十年·追忆与新生:关于2008年的那场地震,陕西有记忆 2019-03-24
  • 瑞典南部城市发生枪击案致5人伤 警方:与恐袭无关 2019-03-24
  • 樱桃-热门标签-华商生活 2019-03-24
  • 紫光阁中共中央国家机关工作委员会 2019-03-24
  • 黔江:1000余亩蓝莓成熟 市民乐享“莓”好时光 2019-03-24
  • 紫光阁中共中央国家机关工作委员会 2019-03-23
  • 【学习时刻】中央党校徐浩然:把“人民”二字镌刻在党的旗帜上 2019-03-23
  • 外贸持续稳中向好透露出哪些信息? 2019-03-23
  • 公众论坛官方网站首页·南方都市报·南方报业传媒集团 2019-03-23
  • 评论:抓实支部 责任上肩 2019-03-22
  • 袁隆平:即使海水稻已经成功,我的压力依然很大袁隆平压力 2019-03-22
  • 52| 826| 748| 600| 476| 256| 657| 149| 855| 447|