2017-03-03 219 views
2

我有一页图像。他们用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,结果是这样的:

A low resolution piece of crap

而如果我打印出来从Firefox ...

enter image description here

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

+0

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

回答

4

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

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

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

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

+0

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