制作帆布图案img

时间:2017-01-08 19:36:02

标签: javascript jquery html5-canvas

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

  1. 在新窗口中打开画布img;
  2. 启动打印功能;
  3. 使用JS后关闭新页面。
  4. 这是我到目前为止所做的:

        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)

2 个答案:

答案 0 :(得分:0)

它是否正常?

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);
});

答案 1 :(得分:0)

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

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的属性)。