Firefox跨源圖像

每當我在圖像上設置crossorigin屬性firefox不要渲染圖像。Firefox跨源圖像

<img crossorigin="anonymous">

我正在使用fabric.js，通過JavaScript爲我設置此屬性。我需要能夠渲染交叉原點圖像。它在Chrome甚至IE中都能正常工作。它接縫，好像Firefox以前有some problems with CORS，我不知道它是否相關，但我似乎找到任何解決方案的問題。

由於我使用，我設置了一個標題PHP代理：

header("Access-Control-Allow-Origin: *");

這工作正常，在Chrome和IE連。

所以，你們都知道爲什麼圖像不顯示;甚至沒有在img標籤？我已發送a bug report，但同時也許有人知道解決方法？

來源

2015-07-13 Victor Axelsson

你是否在src屬性之前設置了cors？ – Cyrbil

由於我沒有自己設置屬性（fabricjs在JS中這樣做），我沒有任何它設置的順序的權力。順序無關緊要，仍然是同樣的結果。 –

這裏很遠，不確定這是否會對您有所幫助。
也許Firefox需要某些標題來加載跨源數據/圖像？
如果你在apache/unix環境下工作，你可以嘗試在你的htaccess中添加以下內容，看看它是否以任何方式幫助你。

# Send the CORS header for images when browsers request it. 
# 
# https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image 
# https://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html 

<IfModule mod_setenvif.c> 
    <IfModule mod_headers.c> 
     <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$"> 
      SetEnvIf Origin ":" IS_CORS 
      Header set Access-Control-Allow-Origin "*" env=IS_CORS 
     </FilesMatch> 
    </IfModule> 
</IfModule>

如果您需要從另一個域「讀」的圖像數據，確保他們發出CORS標頭

來源

2015-07-13 08:22:48 andrew

我可能是錯的，但我的經驗FabricJS不設置crossOrigin屬性。在我的應用程序中，我正在手動設置。但也許我做錯了...

另一個想法是，我認爲該屬性是區分大小寫的 - 'O'應該大寫。在你上面的例子中，它全是小寫。

Mozilla（Firefox的製造商）對於如何使用它也有非常詳細的解釋。 https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

最後，正如其他地方所說的，包括@andrew點突出顯示，服務映像的域需要設置Access-Control-Allow-Origin標頭。如果這不是由承載圖像的服務器設置的，那麼您的畫布將始終受到污染。如果您控制該服務器，請遵循@安德魯的建議（對於Apache）或其他服務器平臺的其他示例，並確保已設置標題。您可以驗證它是通過開發人員工具的網絡面板還是數據包嗅探器進行設置的。

請讓我們知道您發現的解決方案 - CORS可能會非常棘手和混亂，特別是在Fabric和Canvas中，並且Web上的解決方案對於需要一些指導的解決方案非常有用。

來源

2015-07-14 01:39:18 PromInc

實際上我認爲內聯'crossorigin'屬性可能沒有設置camelCase，但是DOM屬性（可通過js訪問）需要它。 – Kaiido

我知道我通過camelCase設置它並取得成功。我測試過Firefox，並且有廣泛的錯誤跟蹤，這表明所有人都在爲我的訪問者工作。只是我的經驗。 – PromInc

是的，因爲HTML不區分大小寫。但是在每一個文件中它都被稱爲「crossorigin」。 – Kaiido

Firefox跨源圖像

回答

相關問題