Filtrowanie i drukowanie w przeglądarce Firefox

Wystąpił problem z prawidłowym przeniesieniem właściwości filtra CSS Firefoksa do skali szarości na wydrukowanej stronie. Z jakiegoś powodu obraz w skali szarości nie jest widoczny na wydruku, ale jest wyświetlany zgodnie z oczekiwaniami na ekranie. Po odnosząc się do pytania jak this one, stałam na tym punkcie (uproszczonej do wykazania wydania)Filtrowanie i drukowanie w przeglądarce 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>

A oto fiddle

Czy istnieje realne obejście tego, czy robię coś źle? Zastosowanie filtrów do innych elementów wydaje się powodować ten sam problem. Byłbym bardzo wdzięczny za wszelkie konstruktywne dane wejściowe.

Uwaga: Używanie Firefoksa v20.0.1

Źródło

2013-05-06 dasch88

+1 dla wiedząc, jak zadać pytanie skomplikowanej prawidłowo. –

Tak więc, aby wyjaśnić, podczas przeglądania na ekranie obraz jest zaznaczony w skali szarości, ale gdy drukujesz zawartość ekranu, skala szarości nie jest stosowana do drukowanego obrazu (na papierze?). – jezzipin

Zamknij, obraz w skali szarości jest w ogóle niewidoczny. Na przykład samo drukowanie samej strony fiddle spowoduje wyświetlenie tylko kolorowego obrazu, natomiast obraz w skali szarości nie będzie widoczny (chociaż przestrzeń layoutu jest nadal zachowywana). – dasch88

Okazuje się to prawie wydaje się być błąd w przeglądarce Firefox. Zauważyłem, że w dowolnym momencie (na ekranie), gdy odwołuje się do svg, którego przeglądarka nie może znaleźć, uzyskałem dokładnie ten sam problem, co podczas drukowania: układ obrazu byłby zarezerwowany, ale byłby pusty. To skłoniło mnie do zastanowienia się, czy istnieje różnica w tym, co można załadować/znaleźć podczas renderowania dla drukarki, a nie ekranu, więc zacząłem próbować różnych sposobów ładowania/odwoływania się do svg. Próbowałem wczytać plik SVG z osobnego pliku, z identyfikatora w html i inline, wszystko w połączeniu z definiowaniem filtru w oddzielnym pliku css, w klasie strony i stylach wbudowanych. Spośród wszystkich kombinacji, zadziałało:

Zdefiniuj svg w html i odwołaj się do niego za pomocą stylów wbudowanych lub klas css na stronie.

Wiem, że to brzmi dziwnie, ale dosłownie wszystko inne próbowałem łamać, w tym robi wszystko tak samo, ale ustawienie właściwości filtra css w zewnętrznym pliku CSS. Idąc podejście w treści strony klasy, oto co stały html wyglądałby następująco:

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

i znowu, zmodyfikowanej fiddle, z którego można wydrukować i teraz zobaczyć obraz dobrze w Firefoksie.

Siiigh, to jest coś takiego, czego można oczekiwać od IE ... miejmy nadzieję, że pomoże uratować komuś jakiś czas/smutek/mordercze myśli

Źródło

2013-05-09 20:06:04 dasch88

W Chrome 43 na Linuksie żadne z nich nie wydrukuje obrazu w skali szarości, niestety. –

Filtrowanie i drukowanie w przeglądarce Firefox

Odpowiedz

Powiązane problemy