使用画布打印div的内容

时间:2014-08-05 17:45:16

标签: javascript html html5 canvas svg

我正在尝试从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设备中运行此代码。

1 个答案:

答案 0 :(得分:2)

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

由于现代浏览器实施的跨域安全性,不再允许使用svg&#39; s foreignObject来捕获网页内容。

如果您的收据是简单的html并且不包含跨域图片,您可以查看html2canvas以在客户端进行内容捕获:

http://html2canvas.hertzen.com/

或者,您也可以使用&#34;无头浏览器&#34;像phantomJS,如果你想捕获服务器上的网页内容:

http://phantomjs.org/