<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>Test</title> <style type="text/css"> *{ margin:0 auto; padding:0; } .btn{ width:100px; height:30px; line-height:30px; background:green; color:#fff; border-radius:10px; -webkit-border-radius:10px; text-align:center; display:block; text-decoration:none; } .container{ background:#e5e5e5; } </style> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script> <script> $(function(){ $("#btn").click(function(){ html2canvas($("#container"), { onrendered: function(canvas) { //把截取到的图片替换到a标签的路径下载 $("#download").attr('href',canvas.toDataURL()); //下载下来的图片名字 $("#download").attr('download',new Date().getTime() + ".png"); //展示图片 document.body.appendChild(canvas); } }); }); }); </script> </head> <body> <div style="padding:10px 0"> <div class="btn" id="btn">截取屏幕</div> <p style="color:red; text-align:center;">先点击截取屏幕后再点击截图下载</p> <div style="margin-top:10px"> <a href="javascript:;" rel="external nofollow" class="btn" id="download">截图下载</a> </div> </div> <div class="container" id="container"> <p style="text-align:center">这里是待截取模块</p> </div> </body> </html>