一:效果图
二:页面代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>电子签名截屏</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="canvasDiv"> <div id="editing_area"> <canvas id="canvasEdit"></canvas> </div> </div> <div class="btnDiv"> <a id="sign_clear" class="clearBtn">清除</a> <a id="sign_clear1" class="down none" download="download">下载</a> <a id="sign_clear2" class="clearBtn">截屏</a> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="js/esign.js"></script> <script type="text/javascript" src="js/html2canvas.min.js"></script> <script type="text/javascript"> function convertCanvasToImage(canvas) { return canvas.toDataURL("image/png"); }; function takeScreenshot() { html2canvas(document.body, { width: document.body.clientWidth / 2 + 1, }).then(function(canvas) { alert('截取成功'); var imgUrl = convertCanvasToImage(canvas); //截取图片路径,该路径为服务器参数 console.log(imgUrl); document.querySelector(".down").setAttribute('href', canvas.toDataURL()); $('#sign_clear1').removeClass('none'); }); }; $(function() { //初始化 $(document).esign("canvasEdit", "sign_show", "sign_clear", "sign_ok"); $(document).on('click', '#sign_clear2', takeScreenshot); }); </script> </body> </html>
三:js路径
https://pan.baidu.com/s/1i5IQiY5