html5中怎么解决canvas图片跨域问题

这篇文章主要介绍"html5中怎么解决canvas图片跨域问题"，在日常操作中，相信很多人在html5中怎么解决canvas图片跨域问题问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"html5中怎么解决canvas图片跨域问题"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

结果在Chrome浏览器下显示如下错误：

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Firefox浏览器错误为：

SecurityError: The operation is insecure.

如果使用的是canvas.toDataURL()方法，则会报：

Failed to execute 'toDataURL' on　'HTMLCanvasElement': Tainted canvased may not be exported

原因其实都是一样的，跨域导致。

那有没有什么办法可以解决这个问题呢？

可以试试 crossOrigin 属性。

三、HTML crossOrigin属性解决资源跨域问题

在HTML5中，有些元素提供了支持CORS(Cross-Origin Resource Sharing)（跨域资源共享）的属性，这些元素包括，，