Question

我使用Paintbrush.js库来更改某些图像的颜色。图像充当图层，当用户单击颜色面板中的颜色时，所选图层会更改颜色。

http://example.com/builder/wheelprosnew/default.cfm

当用户点击颜色时，脚本会将Paintbrush.js的approapiate类添加到image元素并重新加载图像。然后，Paintbrush.js通过HTML5 Canvas将PNG转换为数据URI。

在firefox上，创建数据URI图像。当我将鼠标悬停在元素上时，我可以在Inspect Element上看到它。但它不会显示在浏览器窗口中。我检查了适当的CSS属性（显示，可见性，z-index）。除了预期的控制台之外，控制台上没有错误（与Paintbrush.js示例相同）：

SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead wb-loader2.cfm:5
Error: http://example.com/js/wb-loader2.cfm?id=7&wheel= is being assigned a //# sourceMappingURL, but already has one
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.

我的问题是，可能导致这种情况的原因是什么？

Answer 1

我找到了解决方案：我从所有地方删除了所有的crossOrigin =“anonymous”属性，现在它可以在所有浏览器中使用

Answer 2

如果您的图片上有crossorigin="anonymous"，那么您就会遇到一个Firefox错误，它无法加载具有该属性的数据URI图像。参考： Bug 1109693 - canvas drawImage fails with data:image source and crossOrigin flag set

根据错误跟踪器，修复程序于2015年4月发布，并将登陆Firefox 40（参见Target Milestone字段）

数据URI未在Firefox上显示

2 个答案: