解決方案！：getImageData on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.，crossorigin

解決方案！：getImageData on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.，crossorigin

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

最近在自學html5 CSS3很推薦李剛的 這個書<html5、css3,js權威指南>，今天在家裡測試發現 canvas中的getImageData報錯

Failed to execute 'getImageData' on 'CanvasRenderingContext2D'  ，因為以前出現過一次chrome 跨域訪問json不了的問題，所以我知道是瀏覽器的配置問題 --allow-file-access-from-files就可以了，發現網上沒有答案，於是我就想為什麼我公司的可以，我每次公司用chrome都會出現一個提示瀏覽器安全效能低的提示，我就知道了，因為公司將安全效能降到最低，所以不會出現json跨域和getImageData的

問題，於是我開啟瀏覽器，果然問題這就這裡

解決方案1： --disable-web-security，我們在目標中添加上這一句就可以了記得中間有一個空格，然後關上瀏覽器，重新手動開啟輸入地址，（我的是本地檔案html直接拖放進入，不要使用dw快捷F12開啟，第一次無效，我也不知道為什麼）問題解決 （具體可參照圖片附1），同時附上問題的原因： 

1. 首先沒有伺服器環境（如：本地的 html網頁，操作本地的圖片），    就會報"Unable to get image data from canvas because the canvas has been tainted by cross-origin data"錯誤。    因為本地測試用的圖片是檔案夾內的，js跨域限制是不能擷取非同一網域名稱下的資料的，    而本地的位置是沒有網域名稱的，所以瀏覽器都認為你是跨域，導致報錯。2. 為了阻止欺騙，瀏覽器會追蹤 image data。   當把一個和canvas的域不同的圖片放到canvas上，這個canvas就成為 “tainted”(被汙染的)，瀏覽器就不讓你操作該canvas 的任何像素。   是為了阻止多種類型的XSS/CSRF攻擊（兩種典型的跨站攻擊）。

解決方案2：

將圖片轉換成為字串儲存在瀏覽器，使用時再轉換回去有興趣參考

http://blog.csdn.net/molaifeng/article/details/42293509

圖片：附1