福彩幸运武林开奖 ?
歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > WEB標準 >

??解釋如何解決畫布圖像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';';

如需轉載,請注明文章出處和來源網址:http://www.mcowk.com.cn/w3c/w50970.shtml

我要分享到:

必備CSS教程 Essential CSS Tutorials

必備HTML基礎教程 Essential HTML Tutorials

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-10-23 14:06 原創:DIVCSS5
本文www.mcowk.com.cn DIVCSS5版權所有。

福彩幸运武林开奖