Question

我正在尝试创建一个单击时按钮：

在新窗口中打开画布img;
启动打印功能;
使用JS后关闭新页面。

这是我到目前为止所做的：

    function printCanvas() {
        var canvas = document.getElementById("sidstemoned");
        var img = canvas.toDataURL("image/png");
        var newWin = window.open("");
        newWin.document.write('<img src="' + img + '" />');
        newWin.print();
        newWin.close();
    }
    $(document).ready(function () {
        $('#print_canvas').on('click', printCanvas);
    });

画布：

<canvas
 class='costumor_statistic col-lg-12 col-md-12 col-sm-12'
 style='height:350px;'
 id='sidstemoned'></canvas>

按钮：

<button
  class="btn btn-default hidden-print"
  id="print_canvas">Print <span class="fa fa-print "></span></button>

当我按下按钮时，控制台会打印出来：

未捕获的TypeError：无法读取toDataURL
的属性null
at printCanvas

在HTMLButtonElement。

在HTMLButtonElement.dispatch（jquery.min.js：4）

在HTMLButtonElement.r.handle（jquery.min.js：4）

Answer 1

它是否正常？

function printCanvas() {
    var canvas = document.getElementById("canvasname");
    var img = canvas.toDataURL("image/png");
    var newWin = window.open("");
    newWin.document.write('<img src="' + img + '" />');
    newWin.print();
    newWin.close();
}

UPD：也许您在添加到DOM之前尝试查找画布。尝试将onClick处理程序包装到$(document).ready

$(document).ready(function(){
    $('#print_canvas').on('click', printCanvas);
});

Answer 2

目前的问题是您在canvas函数中使用的变量printCanvas是null，这意味着当您尝试使用以下内容获取元素时：

document.getElementById("sidstemoned");

没有找到任何内容，因此在第二行中，不是从DOM访问元素，而是发生这种情况：

null.toDataURL("image/png");

null没有toDataURL属性（或函数），这就是您收到该错误的原因。因此，请确保您的变量canvas具有与之关联的元素，即您引用的ID sidstemoned存在于文档中。您只需查看其canvas媒体资源即可验证length是否有某些内容：

if(canvas.length !== 0) { /* remaining code goes here */ }

此外，非直接相关，您可能希望删除按钮中的额外class属性（具有单个costumor_statistic的属性）。

制作帆布图案img

2 个答案: