詳解如何解決canvas圖片getImageData,toDataURL跨域問題

一、首先，圖片服務(wù)器需要配置Access-Control-Allow-Origin

一般團(tuán)隊(duì)都會(huì)有一個(gè)專門域名放置靜態(tài)資源，例如騰訊是gtimg.com，百度是bdimg.com；或者很多團(tuán)隊(duì)使用的是騰訊云或者阿里云的服務(wù)。

而主頁面所在域名往往不一樣，當(dāng)需要需要對(duì)canvas圖片進(jìn)行g(shù)etImageData()或toDataURL()操作的時(shí)候，跨域問題就出來了，而且跨域問題還不止一層。

首先，第一步，圖片服務(wù)器需要配置Access-Control-Allow-Origin信息，例如：

如PHP添加響應(yīng)頭信息，*通配符表示允許任意域名：

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

或者指定域名：

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

此時(shí)，Chrome瀏覽器就不會(huì)有Access-Control-Allow-Origin相關(guān)的錯(cuò)誤信息了，但是，還會(huì)有其他的跨域錯(cuò)誤信息。

二、canvas圖片getImageData cross-origin跨域問題

對(duì)于跨域的圖片，只要能夠在網(wǎng)頁中正常顯示出來，就可以使用canvas的drawImage() API繪制出來。但是如果你想更進(jìn)一步，通過getImageData()方法獲取圖片的完整的像素信息，則多半會(huì)出錯(cuò)。

舉例來說，使用下面代碼獲取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';';

結(jié)果在Chrome瀏覽器下顯示如下錯(cuò)誤：

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

Firefox瀏覽器錯(cuò)誤為：

SecurityError: The operation is insecure.

如果使用的是canvas.toDataURL()方法，則會(huì)報(bào)：

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

原因其實(shí)都是一樣的，跨域?qū)е隆?/p>

那有沒有什么辦法可以解決這個(gè)問題呢？

可以試試crossOrigin屬性。

三、HTML crossOrigin屬性解決資源跨域問題

在HTML5中，有些元素提供了支持CORS(Cross-Origin Resource Sharing)（跨域資源共享）的屬性，這些元素包括<img>，<video>，<script>等，而提供的屬性名就是crossOrigin屬性。

因此，上面的跨域問題可以這么處理：

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

var img = new Image();
img.crossOrigin = '';
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';';

增加一個(gè)img.crossOrigin = ''即可，雖然JS代碼這里設(shè)置的是空字符串，實(shí)際上起作用的屬性值是anonymous。

crossOrigin可以有下面兩個(gè)值：