1、首先自己下载引入html2canvaces和jquery（我的demo路径是自己本地的）
2、点击截屏按钮后，跳出层的其他部分是取消保存，点击截取获得的图片区域，表示保存
<!DOCTYPE > <html> <head> <title>截图</title> <meta name="" content="" charset="utf-8" /> <style type="text/css"> #box{ width: 400px; height: 300px; border: 4px solid yellowgreen; color: deeppink; text-align: center; line-height: 300px; font-size: 50px; } button{ width: 200px; height: 50px; font-size: 20px; } #imgContent{ position: absolute; top: 0; left: 0; width: 100%; text-align: center; background: rgba(0,0,0,0.4); display: none; } </style> </head> <body> <div id="box"> 截屏效果测试 </div> <button id="btn1">点击截图</button> <div id="imgContent"></div> <!--用来装图片--> </body> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/html2canvas.js"></script> <script type="text/javascript"> $("#btn1").on("click",function(){ $("#imgContent").show(); /*装图片的盒子显示出来*/ $("#imgContent").css({"height":$("body").outerHeight()});/*装图片的盒子高度出来*/ html2canvas( $("#box") ,{ //box为要截屏的dom元素 onrendered: function(canvas){ var url = canvas.toDataURL(); /*获得的图片路径，base64*/ $("#imgContent").html(' <a href=""><img src="'+ url +'" /></a>'); /*避免事件重复绑定*/ $("#imgContent").off("click","img"); $("#imgContent").on("click","img",function (event) { /*点击下载功能*/ $("#imgContent").find("a").attr( 'href' ,url) ; $("#imgContent").find("a").attr( 'download' , 'caibao.png' ) ; }); } }); }); /*隐藏弹出层*/ $("#imgContent").on("click",function(){ $(this).hide(); }); </script> </html>