利用jQuery.print.js实现canvas的打印功能

青旅半醒 2021-09-14 09:34 922阅读 0赞

### 需求 ###

把在浏览器中的利用canvas做的图实现打印功能

### 思路 ###

1.  先把canvas转换成img
2.  把生成的img利用jQuery插件jquery.print.js实现图片打印功能

### 资料链接 ###

jquery.print.js下载：  
[http://download.csdn.net/download/idomyway/10118559][http_download.csdn.net_download_idomyway_10118559]  
jquery.print.js资料：  
[http://blog.csdn.net/idomyway/article/details/78533862][http_blog.csdn.net_idomyway_article_details_78533862]

### 效果图 ###

![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]

### 代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> #click{ width: 40px; height: 30px; border:1px solid #0d1721; background: #0B8CD4; cursor: pointer; } </style>
        <script src="js/jquery-3.1.1.js"></script>
        <script src="js/jQuery.print.min.js"></script>
    </head>
    <body>
        <canvas id="canvasTest" width="1000px" height="500px"></canvas>
        <div id="click">打印</div>
        <script> var showConvas = document.getElementById("canvasTest"); if(showConvas.getContext){ var ctx = showConvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(100,250); ctx.lineTo(900,250); ctx.stroke(); ctx.beginPath(); ctx.moveTo(500,0); ctx.lineTo(500,500); ctx.stroke(); } function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } $("#click").click(function () { $(convertCanvasToImage(showConvas)).print(); }); </script>
    </body>
    </html>

[http_download.csdn.net_download_idomyway_10118559]: http://download.csdn.net/download/idomyway/10118559
[http_blog.csdn.net_idomyway_article_details_78533862]: http://blog.csdn.net/idomyway/article/details/78533862
[SouthEast]: /images/20210726/2cee670a879a409c8bd7af12cd159e3f.png
[SouthEast 1]: /images/20210726/180e977f9d214a7f8a8c52e7debabd8e.png