Chrome CSS filtre en niveaux de gris distorsion image/texte

La situation est simple:Chrome CSS filtre en niveaux de gris distorsion image/texte

J'ai un contenu sur une page et je veux l'échelle de gris quand il est imprimé. La façon dont je l'ai trouvé pour ce faire est avec des filtres CSS

.body { 
    filter: Gray(); 
    filter: url('#grayscale'); 
    -webkit-filter: grayscale(1); 
    filter: grayscale(100%); 
}

Tout montre bien sur le site, mais déforme lorsque je tente d'imprimer.

Check out the fiddle here (appuyez sur Ctrl-P et regarder la page 2 pour l'exemple.)

Quelqu'un at-il vu cela auparavant? J'utilise Google Chrome v60.0.3112.113

Source

2017-09-27 Hank

Avez-vous essayé d'imprimer? Est-ce que ça a l'air flou? –

@JaneDoe L'impression sort exactement comme l'aperçu. Et ça ne brouille pas, mais à la place c'est plutôt comme une distorsion comme la pixellisation – Hank

J'ai essayé de résoudre votre problème, je suis venu avec une petite solution pour le texte, mais incapable de corriger l'image.

Je trouve que cela fonctionne bien pour le texte:

body { 
    color: red; 
} 
@media print { 
body { 
    color: #000 !important; 
    } 
}

J'espère que ça aide quand même un peu ... Je rougies le texte juste pour prouver qu'il change la couleur en mode d'impression. Le texte semble net, mais l'image est toujours un problème. Pardon.

Source

2017-09-27 22:54:46

Malheureusement, j'ai surtout besoin de l'image en niveaux de gris. Je sais que je peux changer la couleur du texte sur l'impression J'ai principalement ajouté la partie de texte pour montrer que le filtre déforme tous les éléments, pas seulement les images. – Hank

@Hank Je ne suis pas sûr si vous pouvez utiliser Javascript, mais j'ai trouvé une solution qui transforme une image en niveaux de gris et il semble vraiment bon pour l'impression .. https://codepen.io/duketeam/pen/ALEByA –

Chrome CSS filtre en niveaux de gris distorsion image/texte

Répondre

Questions connexes