如何容許WebGL從本地載入資源

當發現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:
一、獲得Chrome的安裝路徑，例如：

C:\Users\-your-user-name\AppData\Local\Google\Chrome\Application

二、在命令行窗口，輸入安裝路徑，加上–allow-file-access-from-files參數，例如：

Chrome installation path\chrome.exe --allow-file-access-from-files

，回車執行，啓動Chrome
三、測試的一個臨時方法:：複製一個Chrome的快捷方式，右鍵->屬性->目標的文本框中加上參數

--allow-file-access-from-files

，例如：

"Chrome installation path\chrome.exe" --allow-file-access-from-files

IE11：默承認以加載本地圖片

Firefox：
一、Firefox的用戶請在瀏覽器的地址欄輸入「about:config」，回車
二、在過濾器（filter）中搜索「security.fileuri.strict_origin_policy」
三、將security.fileuri.strict_origin_policy設置爲false
四、關閉目前開啓的全部Firefox窗口，而後從新啓動Firefox。

On Mac：

Chrome：從命令行窗口中啓動，啓動命令爲

open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

Safari：
一、Safari->偏好設置->高級->勾選「在菜單欄中顯示‘開發’菜單」
二、開發->勾選「啓用WebGL」
三、開發->勾選「停用本地文件限制」

Firefox：
一、Firefox的用戶請在瀏覽器的地址欄輸入「about:config」，回車
二、在過濾器（filter）中搜索「security.fileuri.strict_origin_policy」
三、將security.fileuri.strict_origin_policy設置爲false
四、關閉目前開啓的全部Firefox窗口，而後從新啓動Firefox。

 

 

原文參考：http://www.cnblogs.com/twaver/p/3710941.html