Javascript Firefox跨源图像

无论何时在图像上设置crossorigin属性，firefox都不会渲染图像

<img crossorigin="anonymous">

这在Chrome甚至IE中都能很好地工作

---

所以你们中有人知道为什么不显示图像吗；甚至在img标签上都没有？我已经发送了，但与此同时，可能有人知道解决方法？

这里说的太远了，不确定这是否对您有帮助。
也许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头。
#
# 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
SetEnvIf原点“：”是
标题集访问控制允许原点“*”env=IS\u CORS

---

如果您需要从另一个域“读取”图像数据，请确保他们发出cors标头，我可能会错，但根据我的经验，FabricJS没有设置crossOrigin属性。在我的应用程序中，我正在手动设置。但也许我做错了

另一个想法是，我认为属性区分大小写，“O”应该大写。在上面的例子中，它都是小写的

Mozilla（Firefox的制造商）对如何使用它也有非常详细的解释。

最后，正如其他地方所说的，包括@andrew正在高亮显示的点，为图像服务的域需要设置访问控制允许原点标头。如果这不是由承载图像的服务器设置的，则画布将始终受到污染。如果您控制该服务器，则遵循@andrew的建议（对于Apache）或其他服务器平台的示例，并确保设置了头。您可以通过开发者工具的网络面板或数据包嗅探器来验证它是否已设置

---

请告诉我们您发现的解决方案-CORS可能会很棘手和混乱，尤其是在织物和画布中，而且web上的更多解决方案对需要指导的人非常有帮助。

您是否将CORS设置在src属性之前？因为我自己没有设置属性（fabricjs在JS中进行设置）我没有它设定的顺序的任何力量。顺序不重要，结果还是一样。实际上我认为内联

交叉源
属性可能在没有camelCase的情况下设置，但是DOM属性（可通过js访问）需要它。我知道我正在通过camelCase设置它，并且已经成功了。我已经测试了Firefox，并进行了广泛的错误跟踪，这表明所有这些都适用于我的访问者。只是我的经验。是的，因为HTML不区分大小写。但在每一份文件中，它都被称为“交叉起源”。
# 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>