4

我的页面上有一个画布元素。我在它上面画了一个图像和一些用户输入的数据。按一下按钮，我想将画布发送到打印机，将其打印在纸上。我尝试使用这个插件：jQuery.printElement，就像这样：

按钮代码：

<a href="javascript:print_voucher()">PRINT</a>

'print_voucher()' 函数：

function print_voucher()
{
    $("#canvas_voucher").printElement();
}

canvas_voucher 是我的画布元素的 ID。它打印了页面，但没有打印画布。我也尝试过这样使用它：

$("#canvas_voucher img").printElement();

但这甚至没有启动打印机。

那么我该怎么做呢？如何打印画布的内容？

**编辑** 这是创建我的画布并尝试使用它创建图像的代码：

function create_voucher(visitor_name, visitor_identity_num, unique_number)
{
var canvas = $("#canvas_voucher")[0];
if (canvas.getContext)
{
    var ctx = canvas.getContext('2d');

    // Draw image
    var img = new Image();
    img.src = 'https://someurl.com/image.jpg';

    img.onload = function(){
        ctx.drawImage(img,0,0);
        ctx.fillStyle="#CCC";
        ctx.font="bold 20px Arial";
        ctx.fillText(visitor_name, 750, 270);
        ctx.fillText(visitor_identity_num, 750, 295);

        ctx.font="bold 25px Arial";
        ctx.fillText(unique_number, 620, 325);
    }
    var voucher = canvas.toDataURL("image/png");
    $("#voucher_img").attr("src", voucher);
} else {
    alert('You need Safari or Firefox 1.5+ to see this.');
}

}

4

2 回答 2

10

这会将画布转换为 .png 图像 URL 并在新的浏览器窗口中打开它

触发打印对话框以让用户打印页面。

function print_voucher(){
    var win=window.open();
    win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");
    win.print();
    win.location.reload();
}

这是示例代码： 

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.fillStyle="gold";
    ctx.strokeStyle="blue";
    ctx.lineWidth=5;
    ctx.rect(50,50,100,100);
    ctx.fill();
    ctx.stroke();

    function print_voucher(){
        var win=window.open();
        win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");
        win.print();
        win.location.reload();
    }

    $("#printVoucher").click(function(){ print_voucher(); });


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <button id="printVoucher">Print</button>
</body>
</html>
于 2013-06-09T15:08:44.263 回答
4

发现问题并修复它。显然这是这一行的安全问题：

img.src = 'https://someurl.com/image.jpg';

一旦它指向服务器，它就被认为是潜在的安全威胁。所以我把它改成：

img.src = 'images/image.jpg';

之后，我创建了一个从画布制作图像并在“img.onload”部分中调用它的函数：

...
img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.fillStyle="#CCC";
    ctx.font="bold 20px Arial";
    ctx.fillText(visitor_name, 750, 270);
    ctx.fillText(visitor_identity_num, 750, 295);
    ctx.font="bold 25px Arial";
    ctx.fillText(unique_number, 620, 325);
    draw_voucher_img();
...

function draw_voucher_img()
{
   var canvas = $("#canvas_voucher")[0];
   var voucher = canvas.toDataURL();
   $("#voucher_img").attr("src", voucher);
}

现在它起作用了！

于 2013-06-09T18:08:48.727 回答