相关疑难解决方法(0)

如何打印canvas元素?

我的页面上有一个canvas元素.我在上面绘制一个图像和用户输入的一些数据.只需按一下按钮,我就可以将画布发送到打印机,然后将其打印在纸上.我尝试使用这个插件:jQuery.printElement,就像这样:

按钮代码:

<a href="javascript:print_voucher()">PRINT</a>
Run Code Online (Sandbox Code Playgroud)

'print_voucher()'功能:

function print_voucher()
{
    $("#canvas_voucher").printElement();
}
Run Code Online (Sandbox Code Playgroud)

canvas_voucher是我的canvas元素的ID.它打印了页面,但没有打印画布.我试着像这样使用它:

$("#canvas_voucher img").printElement();
Run Code Online (Sandbox Code Playgroud)

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

那我该怎么办呢?如何打印画布的内容?

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

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 …
Run Code Online (Sandbox Code Playgroud)

printing html5 canvas

4
推荐指数
1
解决办法
2万
查看次数

标签 统计

canvas ×1

html5 ×1

printing ×1