當在canvas中繪製一張外鏈圖片時，我們會遇到一個跨域問題。
範例如下：
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var image = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image').src = canvas.toDataURLL ('image/png'); }; image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg'; </script></body>當在瀏覽器中開啟這個頁面時，你會發現這個問題：
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
這是受限於CORS 策略，會存在跨域問題，雖然可以使用圖像，但是繪製到畫布上會污染畫布，一旦一個畫布被污染,就無法提取畫布的數據，比如無法使用使用畫布toBlob(), toDataURL(),或getImageData()方法；當使用這些方法的時候會拋出上面的安全錯誤
這是一個苦惱的問題，但幸運的是img新增了crossorigin屬性，這個屬性決定了圖片取得過程中是否開啟CORS功能：
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var image = new Image(); image.setAttribute('crossorigin', 'anonymous'); image.onload = function() { ctx.drawImage(image, 0, 0); document .getElementById('image').src = canvas.toDataURL('image/png'); }; image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,25035K1HF6hhy/it/u=3497300994,2503543630&fm=script; /body>比較上面兩段JS程式碼，你會發現多了這一行：
image.setAttribute('crossorigin', 'anonymous');就是這麼簡單，完美的解決了!
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。