今天我們來(lái)說(shuō)說(shuō)在開(kāi)發(fā)中比較常談及的問(wèn)題,那就是跨域問(wèn)題,我們就來(lái)說(shuō)說(shuō)在:“html5中如何解決canvas圖片getImageData,toDataURL跨域問(wèn)題?”這個(gè)問(wèn)題吧!
一、首先,圖片服務(wù)器需要配置Access-Control-Allow-Origin
一般團(tuán)隊(duì)都會(huì)有一個(gè)專(zhuān)門(mén)域名放置靜態(tài)資源,例如騰訊是 gtimg.com,百度是 bdimg.com;或者很多團(tuán)隊(duì)使用的是騰訊云或者阿里云的服務(wù)。
而主頁(yè)面所在域名往往不一樣,當(dāng)需要需要對(duì) canvas 圖片進(jìn)行? getImageData()
?或?toDataURL()
?操作的時(shí)候,跨域問(wèn)題就出來(lái)了,而且跨域問(wèn)題還不止一層。
首先,第一步,圖片服務(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跨域問(wèn)題
對(duì)于跨域的圖片,只要能夠在網(wǎng)頁(yè)中正常顯示出來(lái),就可以使用 canvas 的?drawImage()
??API
?繪制出來(lái)。但是如果你想更進(jìn)一步,通過(guò)?getImageData()
?方法獲取圖片的完整的像素信息,則多半會(huì)出錯(cuò)。
舉例來(lái)說(shuō),使用下面代碼獲取 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>
那有沒(méi)有什么辦法可以解決這個(gè)問(wèn)題呢?
可以試試 crossOrigin 屬性。
三、HTML crossOrigin屬性解決資源跨域問(wèn)題
在HTML5中,有些元素提供了支持?CORS(Cross-Origin Resource Sharing)
?(跨域資源共享)的屬性,這些元素包括<img>,?<video>
?,?<script>
?等,而提供的屬性名就是?crossOrigin
?屬性。
因此,上面的跨域問(wèn)題可以這么處理:
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è)值:
關(guān)鍵字 | 釋義 |
---|---|
anonymous | 元素的跨域資源請(qǐng)求不需要憑證標(biāo)志設(shè)置。 |
use-credentials | 元素的跨域資源請(qǐng)求需要憑證標(biāo)志設(shè)置,意味著該請(qǐng)求需要提供憑證。 |
其中,只要 crossOrigin 的屬性值不是 use-credentials,全部都會(huì)解析為 anonymous,包括空字符串,包括類(lèi)似'abc'這樣的字符。
例如:
img.crossOrigin = 'abc';
console.log(img.crossOrigin); // 結(jié)果是'anonymous'
另外還有一點(diǎn)需要注意,那就是雖然沒(méi)有 crossOrigin 屬性,和設(shè)置 crossOrigin="use-credentials" 在默認(rèn)情況下都會(huì)報(bào)跨域出錯(cuò),但是性質(zhì)上卻不一樣,兩者有較大區(qū)別。
crossOrigin兼容性
IE11+(IE Edge),Safari,Chrome,F(xiàn)irefox瀏覽器均支持,IE9和IE10會(huì)報(bào)SecurityError安全錯(cuò)誤,如下截圖:
四、crossOrigin屬性為什么可以解決資源跨域問(wèn)題?
crossOrigin=anonymous相對(duì)于告訴對(duì)方服務(wù)器,你不需要帶任何非匿名信息過(guò)來(lái)。例如cookie,因此,當(dāng)前瀏覽器肯定是安全的。
就好比你要去別人家里拿一件衣服,crossOrigin=anonymous相對(duì)于告訴對(duì)方,我只要衣服,其他都不要。如果不說(shuō),可能對(duì)方在衣服里放個(gè)竊聽(tīng)器什么的,就不安全了,瀏覽器就會(huì)阻止。
五、IE10瀏覽器不支持crossOrigin怎么辦?
我們請(qǐng)求圖片的時(shí)候,不是直接通過(guò)new Image(),而是借助ajax和URL.createObjectURL()方法曲線(xiàn)救國(guó)。
代碼如下:
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var url = URL.createObjectURL(this.response);
var img = new Image();
img.onload = function () {
// 此時(shí)你就可以使用canvas對(duì)img為所欲為了
// ... code ...
// 圖片用完后記得釋放內(nèi)存
URL.revokeObjectURL(url);
};
img.src = url;
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();
此方法不僅IE10瀏覽器OK,原本支持crossOrigin的諸位瀏覽器也是支持的。
也就多走一個(gè)ajax請(qǐng)求,還可以!
根據(jù),根據(jù)實(shí)踐發(fā)現(xiàn),在IE瀏覽器下,如果請(qǐng)求的圖片過(guò)大,幾千像素那種,圖片會(huì)加載失敗,我猜是超過(guò)了blob尺寸限制。
六、結(jié)束語(yǔ)
那么這就是有關(guān)于:“html5中如何解決canvas圖片getImageData,toDataURL跨域問(wèn)題?”這個(gè)問(wèn)的相關(guān)內(nèi)容,當(dāng)然更多的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。