失敗crossOrigin訪問畫布toDataUrl

我想創建一個人們可以創建一個萬花筒的litte頁面。我使用可用的腳本並添加了一些圖像瀏覽和Save-Funktionality。現在我有一個奇怪的問題，將結果畫布數據保存爲圖像。失敗crossOrigin訪問畫布toDataUrl

火狐控制檯說：的SecurityError：操作是不安全的

失敗電話：Canvas2Image.saveAsPNG（oCanvas）;

這甚至出現了來自我自己的網站的圖片 - 什麼？我檢查了一些在這裏找到的tipps在stackoverflow。他們都不能提供幫助。

CORS不能解決這個問題。
的.htaccess項沒有效果：頭總是設置訪問控制允許來源*

另一個傢伙似乎有同樣的問題：How to allow cross-origin access to imgs and canvases?

任何人可以幫我這個奇怪的事情？

非常感謝！

下面是測試現場：http://www.13lumen.de/kaleidoscopetest

來源

2013-10-25 Marcel

要完成CORS的兼容性......

此外，您還必須設置Image對象的crossOrigin財產客戶端。

var img = new Image(); 
img.crossOrigin="anonymous"; 
img.src="yourImage.png";

所以，你需要設置crossOrigin屬性在canvas2Image.js也（約158線）。

其他很好的參考

這裏有一個很好的鏈接到您的網站上啓用跨域傳輸：

http://enable-cors.org/

而且配置您的網站後，利用這個測試CORS兼容性：

http://client.cors-api.appspot.com/client#?client_method=GET&client_credentials=false&server_url=http%3A%2F%2Fatlantacodingcompany.com%2Fimages%2Fhouse1.jpg&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote

直到您獲得您自己的網站CORS兼容，您可以使用dropbox.com來測試您的網站。

註冊一個免費的dropbox.com帳戶。
暫時將您的圖片放在「公共」文件夾中。
右鍵單擊任何公共圖像併爲該文件「複製公共鏈接」。
在客戶端上：使用crossOrigin =「anonymous」屬性加載圖像。
你的圖片將暫時符合CORS標準！

來源

2013-10-25 20:20:05 markE

嘿馬克。我在這裏問的原因是：我已經在設置src屬性的所有行上設置了crossOrigin屬性。什麼都沒發生。如果我在第一個src屬性設置之前設置了crossOrigin，則不會載入圖像 - 這真的很奇怪。第二個事實：我的所有圖像都來自託管畫布腳本的相同服務器。我認爲在這種情況下我不需要任何CORS。有人能解釋我在哪裏犯了一個錯誤嗎？請檢查我的測試網站的源代碼。謝謝。 – Marcel

使用從dropbox.com提取的圖像（請參閱上文）嘗試進行測試，以確認您的客戶端代碼符合CORS標準。 – markE

我再次檢查了保管箱測試。我忘了將圖像移動到公用文件夾。現在Dropbox測試工作正常。哇。現在我的問題：如何將我的服務器切換到啓用CORS的服務器？這時我的.htaccess中的第一行是：'Header add Access-Control-Allow-Origin「http://www.13lumen.de」' – Marcel

-1

其中圖像來自於服務器上的.htaccess項目的必須是：

Header add Access-Control-Allow-Origin "*"

來源

2013-10-26 12:54:14 Marcel

失敗crossOrigin訪問畫布toDataUrl

回答

相關問題