這篇文章主要介紹了怎么解決canvas繪圖時(shí)遇到的跨域問題，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)嵩縣免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

當(dāng)在canvas中繪制一張外鏈圖片時(shí)，我們會(huì)遇到一個(gè)跨域問題。

示例如下：

當(dāng)在瀏覽器中打開這個(gè)頁面時(shí)，你會(huì)發(fā)現(xiàn)這個(gè)問題：

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

這是受限于 CORS 策略，會(huì)存在跨域問題，雖然可以使用圖像，但是繪制到畫布上會(huì)污染畫布，一旦一個(gè)畫布被污染,就無法提取畫布的數(shù)據(jù)，比如無法使用使用畫布toBlob(),toDataURL(),或getImageData()方法；當(dāng)使用這些方法的時(shí)候 會(huì)拋出上面的安全錯(cuò)誤

這是一個(gè)苦惱的問題，但幸運(yùn)的是img新增了crossorigin屬性，這個(gè)屬性決定了圖片獲取過程中是否開啟CORS功能：

對(duì)比上面兩段JS代碼，你會(huì)發(fā)現(xiàn)多了這一行：

image.setAttribute('crossorigin', 'anonymous');

就是這么簡單，完美的解決了!

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享怎么解決canvas繪圖時(shí)遇到的跨域問題內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，詳細(xì)的解決方法等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞名稱：怎么解決canvas繪圖時(shí)遇到的跨域問題-創(chuàng)新互聯(lián)
文章鏈接：http://weahome.cn/article/spphp.html