當發現3D展現是一團黑的時候,在控制台如果看到“Unable to get image data from canvas because the canvas has been tainted by cross-origin data.”的錯誤提示,這是因為瀏覽器的安全策略,“同源策略”。瀏覽器為了阻止欺騙,會追蹤 image data。當你把一個“跟canvas的域不同的”圖片放到canvas上,這個canvas就成為 “tainted”(被污染的,臟的),瀏覽器就不讓你操作該canvas 的任何像素。
這個問題有兩種解決方案
方案一:有服務器環境,將項目部署在web服務器上,最簡單的tomcat。
mono-design的目錄中並直接移動到例如apache-tomcat-6.0.37\webapps\ROOT\下,然后瀏覽器打開后輸入http://localhost/mono-design/即可。
方案二:設置瀏覽器
On Windows:
Chrome:
1、得到Chrome的安裝路徑,例如:
C:\Users\-your-user-name\AppData\Local\Google\Chrome\Application
2、在命令行窗口,輸入安裝路徑,加上–allow-file-access-from-files參數,例如:
Chrome installation path\chrome.exe --allow-file-access-from-files
,回車執行,啟動Chrome
3、測試的一個臨時方法::復制一個Chrome的快捷方式,右鍵->屬性->目標的文本框中加上參數
--allow-file-access-from-files
,例如:
"Chrome installation path\chrome.exe" --allow-file-access-from-files
IE11:默認可以加載本地圖片
Firefox:
1、Firefox的用戶請在瀏覽器的地址欄輸入“about:config”,回車
2、在過濾器(filter)中搜索“security.fileuri.strict_origin_policy”
3、將security.fileuri.strict_origin_policy設置為false
4、關閉目前開啟的所有Firefox窗口,然后重新啟動Firefox。
On Mac:
Chrome:從命令行窗口中啟動,啟動命令為
open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
Safari:
1、Safari->偏好設置->高級->勾選“在菜單欄中顯示‘開發’菜單”
2、開發->勾選“啟用WebGL”
3、開發->勾選“停用本地文件限制”
Firefox:
1、Firefox的用戶請在瀏覽器的地址欄輸入“about:config”,回車
2、在過濾器(filter)中搜索“security.fileuri.strict_origin_policy”
3、將security.fileuri.strict_origin_policy設置為false
4、關閉目前開啟的所有Firefox窗口,然后重新啟動Firefox。
原文參考:http://www.cnblogs.com/twaver/p/3710941.html