Firefox筛选器灰度和打印

Question

Firefox筛选器灰度和打印

8

我在使用Firefox的filter css属性将页面灰度化时遇到了问题。不知何故，在打印页面上无法看到灰度图像，但在屏幕上则能按预期显示。在参考了类似这个问题后，我已经达到了以下步骤（为了说明问题而简化）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .grayscale {
                filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
                filter: grayscale(100%);
            }
            img {
                width:100px;
            }
        </style>
    </head>
    <body>
        <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
    </body>
</html>

这里是演示代码

是否有可行的解决方法，或者我做错了什么？将过滤器应用于其他元素似乎会导致相同的问题。非常感谢任何建设性的意见。

注意：使用Firefox v20.0.1

- dasch88

2

懂得如何恰当地提出一个复杂问题，是程序员的一项重要技能。 - Steve Wellens

所以，只是为了澄清，当您在屏幕上查看图像时，它是灰度的，但当您打印屏幕内容时，灰度不会应用于打印出来的图像（纸上的图像）吗？ - jezzipin

关闭，实际上灰度图像根本不可见。例如，即使打印小提琴页面本身，也只会显示彩色图像，而灰度图像是不可见的（尽管布局空间仍然保留）。 - dasch88

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dasch88 · Answer 1

原来这几乎是FireFox浏览器的一个bug。我注意到，每当（在屏幕上）引用浏览器找不到的svg时，我会遇到与打印时完全相同的问题：图像布局将被保留，但将是空白空间。这促使我想知道在为打印机呈现而不是屏幕时可以加载/找到什么区别，因此我开始尝试不同的加载/引用svg的方法。我尝试从单独的文件中加载svg，从html中的id中加载svg，并内联加载，所有这些都与在单独的css文件中定义过滤器，页面类和内联样式相结合。在所有组合中，这就是有效的方法：

在html中定义svg，并使用内联样式或页面css类引用它。

我知道这听起来很奇怪，但我尝试的其他所有方法都失败了，包括做完全相同的事情，但在外部css文件中设置过滤器css属性。采用页面类方法，以下是修复后的html的外观：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .grayscale {
                filter: url(#grayscale); /* Firefox 10+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
            }
            img {
                width:100px;
            }
        </style>
    </head>
    <body>
        <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <svg xmlns='http://www.w3.org/2000/svg' height="0px">
            <filter id='grayscale'>
                <feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0      0      
                                                     0.3333 0.3333 0.3333 0      0      
                                                     0.3333 0.3333 0.3333 0      0      
                                                     0      0      0      1      0'/>
            </filter>
        </svg>
    </body>
</html>

再次提醒，修改后的fiddle可以打印，并且现在在Firefox浏览器中可以正常查看图像。

唉，这是我从IE浏览器中预料到的问题...希望能帮助节省一些人的时间/烦恼/杀戮的想法。