使用画布打印 div 的内容答案

【问题标题】：Printing the contents of a div using a canvas使用画布打印 div 的内容
【发布时间】：2014-08-06 02:18:30
【问题描述】：

我正在尝试从 div 的内容中生成图像。不幸的是，它对我不起作用。我之所以要这样做，是因为我想将生成的图像作为 base64 字符串发送到打印机。

不管怎样，下面是我的代码：

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var data = "data:image/svg+xml," +
               "<svg xmlns='http://www.w3.org/2000/svg' width='300' height='250'>" +
                 "<foreignObject width='100%' height='100%'>" +
                   document.getElementById('receipt_wrapper').innerHTML +
                 "</foreignObject>" +
               "</svg>";
    var img = new Image();
    img.src = data;
    img.onload = function () { ctx.drawImage(img, 0, 0); };

    var dataURL = canvas.toDataURL("image/png");
    var imgBase64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    if (window.Android != undefined) {
        Android.print(image);
    }

画布中没有显示任何内容。我的代码有什么问题？

P.S：我在 Android 设备中运行此代码。

【问题讨论】：

标签： javascript html canvas svg

【解决方案1】：

该方法不再适用于现代浏览器。

由于现代浏览器实现了跨域安全性，不再允许使用 svg 的 foreignObject 捕获网页内容。

如果您的收据是简单的 html 并且不包含跨域图像，您可以查看 html2canvas 以在客户端捕获内容：

http://html2canvas.hertzen.com/

或者，如果您想在服务器上捕获网页内容，您也可以使用像 phantomJS 这样的“无头浏览器”：

http://phantomjs.org/

【讨论】：

是的，我之前尝试过html2canvas，但我一直收到此错误：IndexSizeError: Index or size is negative or greater than the allowed amount。不幸的是，我刚刚再次尝试，我得到了同样的错误。有什么想法吗？
html2canvas 适用于简单的 html，但对于比简单样式更重要的任何东西，通常都会出现故障。如果你给了 html2canvas 2 次射击......我会放弃它。你看过 phantomJS 吗？它在服务器上工作，但它使用完整的 WebKit 引擎，因此您更复杂的 html 和 CSS 将被正确转换为图像格式。由于您正在打印，因此您也可以考虑将收据编码为 .pdf 格式。
嗯，我发现了问题所在。显然，我试图渲染为图像的div 元素的bounds 使用Element.getBoundingClientRect() 方法返回为零。 div 的内容是一个包含一些行和两列的表格。你认为我可以做点什么来解决它吗？
顺便说一句，使用服务器不是一种选择。这应该在大部分时间处于离线状态的移动设备的客户端上运行。