js截屏

<html>
<head>
    <meta name="layout" content="main">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://lib.baomitu.com/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://lib.baomitu.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

    <script  type="text/javascript" >
        $(document).ready( function(){
            $(".example1").on("click", function(event) {
                event.preventDefault();
                html2canvas(document.body, {
                    allowTaint: true,
                    taintTest: false,
                    onrendered: function(canvas) {
                        canvas.id = "mycanvas";
                        //document.body.appendChild(canvas);
                        //生成base64图片数据
                        var dataUrl = canvas.toDataURL();
                        var newImg = document.createElement("img");
                        newImg.src =  dataUrl;
                        document.body.appendChild(newImg);
                    }
                });
            });

        });

    </script>
</head>
<body>

Hello!
<div class="" style="background-color: #abc;">
    计算机天堂测试html5页面截图
    <br>jsjtt.com
</div>

<textArea id="textArea" col="20" rows="10" ></textArea>
<input class="example1" type="button" value="button">
生成界面如下：
</body>
</html>
猜你喜欢
