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

成都創新互聯自2013年起，公司以網站設計、網站制作、系統開發、網絡推廣、文化傳媒、企業宣傳、平面廣告設計等為主要業務，適用行業近百種。服務企業客戶超過千家，涉及國內多個省份客戶。擁有多年網站建設開發經驗。為企業提供專業的網站建設、創意設計、宣傳推廣等服務。 通過專業的設計、獨特的風格，為不同客戶提供各種風格的特色服務。

當在canvas中繪制一張外鏈圖片時，我們會遇到一個跨域問題。

示例如下：

當在瀏覽器中打開這個頁面時，你會發現這個問題：

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

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

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

對比上面兩段JS代碼，你會發現多了這一行：

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享怎么解決canvas繪圖時遇到的跨域問題內容對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，遇到問題就找創新互聯，詳細的解決方法等著你來學習!