最近在使用 Canvas 時(shí)，遇到了跨域問題。本文介紹如何解決這類跨域問題。
具體的錯誤信息如下：
Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
對于跨域的圖片，只要能夠在網(wǎng)頁中正常顯示出來，就可以使用canvas的drawImage() API繪制出來。但是如果你想更進(jìn)一步，通過getImageData()方法獲取圖片的完整的像素信息，則多半會出錯。
那有沒有什么辦法可以解決這個(gè)問題呢？
在HTML5中，有些元素提供了支持CORS(Cross-Origin Resource Sharing)（跨域資源共享）的屬性，這些元素包括<img>，<video>，<script>等，而提供的屬性名就是crossOrigin屬性。
因此，上面的跨域問題可以這么處理：
增加一個(gè)img.crossOrigin = ''即可，雖然JS代碼這里設(shè)置的是空字符串，實(shí)際上起作用的屬性值是anonymous。
crossOrigin可以有下面兩個(gè)值：
anonymous:元素的跨域資源請求不需要憑證標(biāo)志設(shè)置。
use-credentials:元素的跨域資源請求需要憑證標(biāo)志設(shè)置，意味著該請求需要提供憑證。
其中，只要crossOrigin的屬性值不是use-credentials，全部都會解析為anonymous，包括空字符串，包括類似'xttblog'這樣的字符。
另外還有一點(diǎn)需要注意，那就是雖然沒有crossOrigin屬性，和設(shè)置crossOrigin="use-credentials"在默認(rèn)情況下都會報(bào)跨域出錯，但是性質(zhì)上卻不一樣，兩者有較大區(qū)別。文章來源：http://www.zghlxwxcb.cn/news/detail-432200.html
IE11+，Safari，Chrome，F(xiàn)irefox瀏覽器均支持，IE9和IE10會報(bào)SecurityError安全錯誤。文章來源地址http://www.zghlxwxcb.cn/news/detail-432200.html
到了這里，關(guān)于Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’ 問題解決方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
