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打印它......

显然，Chrome将图像导出到打印假脱机的方式有问题。它在打印预览窗口中看起来很好，但它缩小了尺寸。有人遇到过这个问题吗？

Answer 1

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

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

一旦我从装箱单中取出过滤器标签，条形码就会以全分辨率呈现，并且可以再次由我的客户的条形码扫描仪进行扫描。

总结一下，删除CSS代码filter: grayscale(100%);可以解决这个问题。