怎么解决画布图像getImageData和toDataURL跨域问题

这篇文章主要介绍了怎么解决画布图像getImageData和toDataURL跨域问题的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么解决画布图像getImageData和toDataURL跨域问题文章都会有所收获，下面我们一起来看看吧。

 一、首先，图片服务器需要配置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';';

关于“怎么解决画布图像getImageData和toDataURL跨域问题”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么解决画布图像getImageData和toDataURL跨域问题”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网JavaScript频道。