Firefox濾鏡灰度和打印

我遇到了一個問題，在打印的頁面上正確地將Firefox的濾鏡CSS屬性變爲灰度。由於某些原因，灰階圖像在打印輸出中不可見，儘管它在屏幕上按預期顯示。提到的問題，如this one後，我已經得到了這一點（簡體證明問題）：Firefox濾鏡灰度和打印

<!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>

而這裏的fiddle

是否有此可行的解決辦法，還是我做的事情錯誤？將過濾器應用於其他元素似乎會導致相同的問題。我非常感謝任何建設性意見。

注：使用Firefox v20.0.1

來源

2013-05-06 dasch88

+1知道如何正確地問一個複雜的問題。 – 2013-05-06 16:39:27

僅僅爲了澄清一下，當您在屏幕上查看時，圖像是灰度的，但是當您打印出屏幕內容時，灰度不會應用於打印圖像（在紙上？）。 – jezzipin 2013-05-08 15:19:19

關閉，而是灰度圖像根本不可見。例如，即使打印小提琴頁面本身也只會顯示彩色圖像，而灰度圖像不可見（儘管佈局空間仍然保留）。 – dasch88 2013-05-08 15:47:01

事實證明，這幾乎似乎是在Firefox瀏覽器中的bug。我注意到，無論何時（屏幕上），當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罰款。

Siiigh，這是那種我從IE想到的事情...希望可以幫助節省的人一段時間/悲傷/殺氣的想法

來源

2013-05-09 20:06:04 dasch88

在Linux的Chrome 43上，不幸的是，這兩個小提琴都不會打印灰度圖像。 – 2015-05-04 13:37:34

Firefox濾鏡灰度和打印

回答

相關問題