制作画布IMG

Question

我想创建一个按钮，点击时的打印：

1. 打开一个新的窗口画布IMG;
2. 开始打印功能;
3. 使用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> 

控制台打印此当我按下按钮：

Uncaught TypeError: Cannot read property toDataURL of null

at printCanvas

at HTMLButtonElement.

at HTMLButtonElement.dispatch (jquery.min.js:4)

at 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）。