用了html2canvas和canvas2image两个插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> #sd{ width: 300px; height: 300px; background: #ccc; margin: 0 auto; } </style> </head> <body> <div id="sd">asdasdasdasdasd</div> <button class="btn">ssss</button> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script> <script src="https://superal.github.io/canvas2image/canvas2image.js"></script> <script> $(function(){ $(document).on('keydown',function(e){ e.preventDefault() var keyCode = e.keyCode || e.which || e.charCode; var ctrlKey = e.ctrlKey || e.metaKey; if(ctrlKey && keyCode == 83) { alert('save'); } return false; }); $('.btn').click(function(){ html2canvas($('#sd'), { onrendered: function(canvas) { return Canvas2Image.saveAsPNG(canvas); } }); }) }) </script> </body> </html>