怎么解決畫布圖像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跨域問題”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。