Google Chromeの低解像度画像の印刷

Question

私はいくつかの画像があるページがあります。それらはCSSでリサイズされます。

が

@media print { 

.img-thumbnail { 
    width: 45vw; 
    height: auto !important; 
    min-height: auto; 
    max-height: 100vh; 
    margin-top: 0.5em; 
    display: block; 
    page-break-inside: avoid; 
    filter: grayscale(100%); 
} 

それが画面上に完璧に見えるが、私は実際に印刷またはChromeからPDFにエクスポートするとき、結果がこれです：：ここではどのようにある

私はそれを印刷する場合一方Firefoxのから...

明らかに何かがクロームに画像をエクスポートする方法で間違っています印刷スプール。印刷プレビューウィンドウでうまく見えますが、縮小されます。誰もこの問題にまだ会っていますか？

Answer 1

私はクライアントの梱包用紙のバーコードを印刷することで、この問題を自分で解決しました。あなたがこれをまだ解決しているかどうかはわかりませんが、私はこのページを見つけた他の人たちにこれを載せたいと思っていました。

CSSタグfilter: grayscale(100%);は、上記のようにChromeが低解像度で画像をレンダリングすることが判明しました。このCSSフィルタが、クライアントのパッキングスリップにあるロゴ、製品イメージ、およびバーコードを上記のようにレンダリングさせていることが判明しました。

パッキングスリップからフィルタータグを取り除くと、バーコードがフル解像度でレンダリングされ、クライアントのバーコードスキャナーで再度スキャンすることができました。

要約すると、CSSタグfilter: grayscale(100%);を削除すると、この問題が解決されました。