页面生成图片

用了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>

 

posted @ 2017-08-01 17:10  Jerry24  阅读(203)  评论(0)  编辑  收藏  举报