Chrome将灰色轮廓添加到打印的透明png / gif中

Question

我正在使用浏览器中的打印模板进行print-to-pdf，并在一个部分中使用透明的.png叠加层。

透明的.png文件和透明的.gif文件都会发生这种情况：

Chrome在打印时（包括.pdf和打印预览窗口），似乎勾勒出1px灰线的透明图像：

图表A：

我在其他几个浏览器（包括Safari）中尝试过此操作，但似乎没有人像Chrome那样做。谁看过这个吗？我需要找到一种方法来禁用它或在Chrome端进行黑客攻击，以便在浏览器中使用它。

要查看此操作，请点击此处：http://jsfiddle.net/brandonscript/nELwd/（仅<img />标记），然后按Cmd / Ctrl + P调出打印预览。如果打印到.pdf，您会在预览和中看到这一点。确保启用了“背景颜色和图像”，否则您将看不到任何图像。

注意：我不打算在打印之后找到的解决方法，我知道如果你将图像调整为100％并查看.pdf 100％缩放，你看不到灰线。我需要在打印.pdf之前以编程方式（或以其他方式）删除灰线。

Answer 1

我已经做了足够的实验，并在这样做时考虑了上述所有答案。 可疑的是，在保存你的图像并打开gimp和一些戳之后，我发现了这个。

这让我觉得你的形象真实，包含它周围的灰色边框。我的建议是你删除那个图层并使实际图像周围的空白区域变为透明。

编辑（对@remus评论的回复）

我不知道我的说法是否正确，但我相信图像不是您所期望的。您需要更正该图像。我已使用another image of mine进行了测试，pasted on the fiddle在屏幕和打印预览中没有任何边框。 （最后的pdf也是如此）。对不起，如果这个答案是正确的并且伤害了你。

Answer 2

虽然我没有遇到过这个问题，但我在css打印方面做了很多工作（用于pdf和浏览器打印），而且我经常使用2张图像：1用于屏幕，1用于打印（在yuour情况下不要使用透明度进行打印）：

<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay.gif' width='300' height='400' class="screen"/>

<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay_print.gif' width='300' height='400' class="forPrinting"/>

在主css文件中：

img.forPrinting { display:none }

在你的print css文件中，应该在你的主css文件之后声明：

img.screen {display:none }
img.forPrinting { display:block; }

Answer 3

简答： 将PDF打印预设更改为更高的分辨率。

你会得到：

长版：

我注意到您通过在HTML代码中更改其宽度高度属性来重新调整图像大小。 因此，我确保您的图像完全符合您所需的尺寸，并且不会有这种奇怪的轮廓。

请参阅链接：jsfiddle.net/cyVqw /

我有一个打印预览：

PDF截图：

要验证PDF格式是否会保持图像的透明度，我会检查它 PDF以更高分辨率预设保存，即“打印质量”。这导致了一个大文件，但具有更好的缩放质量：

这是高分辨率33％预览：

高分辨率200％预览

因此，您需要做的是调整PDF质量预设。