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


隨着mono-design不斷推廣,用戶越來越多,陸續有電話來詢問“為什么3D展現的時候,是一團黑?”,針對這個問題,專門寫個帖子說明原因並給出解決方案,並且在mono-design編輯器中加了判斷功能,同時鏈接到這里,不用等到發現一團黑時,才知道出問題。

好了,言歸正傳,開始分析問題:
當發現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。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM