Javascript 使用画布打印div的内容

我正在尝试从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);
    }

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var data=“data:image/svg+xml，”+
"" +
"" +
document.getElementById（'receipt_wrapper'）.innerHTML+
"" +
"";
var img=新图像（）；
img.src=数据；
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！=未定义）{
打印（图像）；
}

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

---

注：我正在Android设备中运行此代码。

这种方法在现代浏览器上不再有效。

由于现代浏览器实现的跨域安全性，不再允许使用svg的

foreignObject

捕获网页内容

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

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

---

是的，我以前尝试过

html2canvas

，但我一直遇到这个错误：

IndexSizeError:Index或size为负数或大于允许的数量

。不幸的是，我刚刚又试了一次，却得到了同样的错误。有什么想法吗？html2canvas适用于简单的html，但对于任何比简单样式更重要的东西，它通常都会变得油腔滑调。如果你给html2canvas打了两枪…我会放弃的。你看过幻影吗。它可以在服务器上工作，但它使用完整的WebKit引擎，因此更复杂的html和CSS将正确地转换为图像格式。既然你正在打印，你可能会考虑考虑用.pdf格式对收据进行编码。我发现问题出在哪里。显然，我试图渲染为图像的

div

元素的

边界将使用
element.getBoundingClientRect（）方法返回为零。
div
的内容是一个包含一些行和两列的表。你认为我可以做些什么来修复它吗？顺便说一下，使用服务器不是一个选项。这应该在大部分时间处于脱机状态的移动设备的客户端上运行。