在Chrome和Opera浏览器中，Canvas标签的内容无法打印的问题

Question

这些浏览器（Windows版本）可以正确打印具有canvas覆盖在img标签图像上的网页：

IE6、IE7、IE8、Firefox、Safari

但是Chrome（截至我撰写本文时的最新版本为3.0.195.27）和Opera（截至我撰写本文时的最新版本为10.0 build 1750）无法正确打印。Chrome完全忽略了canvas渲染。Opera将整个canvas呈现为白色矩形，遮挡了其后面的图像。

我知道canvas标签相当新，并且打印网页总是很棘手。我该如何处理？是否有任何设置我错过了以使其正常工作？是否有“即将打印”事件我可以通过JavaScript捕获来警告用户？

更新：事情比看起来更奇怪。组合图像（canvas覆盖img）在我的Brother激光打印机上正确打印，但在我的hp喷墨打印机上不行。

因此，目前情况是大多数浏览器都可以正确打印到我的喷墨打印机，但Chrome不能。Opera在两台打印机上都出现问题。

这是所有打印机驱动程序以及各种浏览器与它们通信方式的问题吗？

更新：我注意到Google Docs会生成PDF文件进行打印。

- Nosredna

---

http://www.twiddla.com/test/ChromeCanvas.html 测试页面，或许可以帮助找出问题！？ - powtac

@powtac... 你让这个问题更有趣了。在 Chrome 中，你链接的那个页面可以在我的黑白激光打印机上正常打印，但左侧的红色框在我的彩色喷墨打印机上无法打印（但右侧的两个红色图形 - 它们是位图 - 可以打印）。 - Nosredna

如果我在Chrome 4.0.222（Beta）上使用PDF Creator或XPS writer（没有在真实打印机上测试），文档打印得很好。也许这个问题在这个版本中已经修复了。 - Fabien Ménager

@Fabien Menager：我不确定这告诉我什么，因为问题取决于我选择的打印机输出。 - Nosredna

我不确定这是否相关，但是这篇博客文章提到了使用Opera打印Canvas元素时会出现问题，具体取决于用户设置：http://my.opera.com/OmegaJunior/blog/2009/08/13/printing-canvas-images-with-variable-background-colours - John Smithers

Answer 1

你可以使用PHP的PDF函数来编程创建PDF。这真的很容易！

创建新的PDF：

$pdf = pdf_new();

打开文件：

pdf_open_file($pdf, "pdfName.pdf");

您可以设置一些变量，如作者：

pdf_set_info($pdf, "Title", "pdf Title here");

现在您需要使用pdf_begin_page()函数：

pdf_begin_page($pdf, 595, 842);

这是A4的尺寸。 内容 最后用以下代码关闭文件：

pdf_end_page($pdf);
pdf_close($pdf);

完整的参考资料，请查看PHP的PDF手册。

- richard

---

很酷。当然，我需要将所有信息发送到服务器，包括所有画布操作的历史记录（我必须在服务器上模拟这些操作）。 - Nosredna

Answer 2

我在想，如果不是渲染到一个<canvas>元素上：如果你将其渲染到一个离线文档画布对象上，并在<div>上设置CSS样式，使其background-image设置为"url("+myCanvasObject.toDataUrl()+")"，它可能会正确打印。

此外，您可以将新的<img />元素的src属性设置为相同的myCanvasObject.toDataUrl()。这应该比我上面提到的方法更好处理。

- JasonWyatt

---

一个有趣的想法。 :-) 我敢打赌IE至少不会吃掉它，但Chrome和Opera可能会。 - Nosredna

你关于IE的想法可能是正确的，不过还是值得一试的！ - JasonWyatt

我添加了另一个可能的解决方案，这个可能更准确/有用。 - JasonWyatt

Answer 3

我建议将页面保存为PDF并尝试打印。 PDF文档应该是WYSIWYG（所见即所得）。 如果PDF呈现正确，任何打印机都应该可以正常打印。

- Joy Dutta

---

那我如何将页面保存为PDF呢？我可以编程实现吗？ - Nosredna

抱歉如果我假设你有一台Mac电脑。每当你在Mac上尝试从浏览器打印时，你会在左下角看到一个PDF菜单。你可以使用其中的一个选项将其保存为PDF文件。 - Joy Dutta

在大多数Linux发行版（如Ubuntu）中，您也可以将文件打印为PDF格式。我想Windows上的Adobe Acrobat Reader也具备这个选项，但我不确定。 - richard

我正在寻找一种用户可以使用的方法，而不是特定于操作系统的方法。不过这是个好主意。 - Nosredna