Google Chrome以低分辨率打印图像

问题描述：

我有一页图像。他们用CSS来调整大小。这里是如何：Google Chrome以低分辨率打印图像

@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 ...

显然，什么是错在Chrome浏览器将图像导出到打印卷轴。它在打印预览窗口中看起来很好，但它被缩小了。有没有人遇到过这个问题呢？

我们正在被这个bug也咬一口。当尝试从Google地图进行打印时（gf需要纸张），它尤其值得注意。在Firefox中，一切看起来都不错，但从Chrome的街道名称是难以辨认的。 –

答

我刚刚遇到了这个问题，自己打印客户的装箱单的条形码。我不确定你是否已经解决了这个问题，但是我想把它放在这里供其他人找到这个页面。

事实证明，CSS标记filter: grayscale(100%);会导致Chrome以低分辨率渲染图像，如上所示。事实证明，这个CSS过滤器导致我客户的装箱单上的徽标，产品图像和条形码如上所示被渲染出来。

只要我从装箱单中取出过滤器标签，条形码就会以全分辨率呈现出来，并且能够被我的客户端的条形码扫描仪再次扫描。

总而言之，删除CSS标记filter: grayscale(100%);为我解决了这个问题。

所有月亮的母亲！谢谢。 –

Google Chrome以低分辨率打印图像

相关推荐