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跨源图像

回答

相关问题