DBMNG数据库管理与应用

才能是来自独创性。独创性是思维、观察、理解和判断的一种独特的方式。
当前位置:首页 > 经验分享 > HTML5

html5实现网页截屏页面生成图片(源代码)

<!DOCTYPE html>

<html>

    <head>

        <meta name="layout" content="main">

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

        <script type="text/javascript" src="http://html2canvas.hertzen.com/build/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页面截图

        </div>

        <textArea id="textArea" col="20" rows="10" ></textArea>

        <input class="example1" type="button" value="截图">

        生成界面如下:

    </body>

</html>


本站文章内容,部分来自于互联网,若侵犯了您的权益,请致邮件chuanghui423#sohu.com(请将#换为@)联系,我们会尽快核实后删除。
Copyright © 2006-2023 DBMNG.COM All Rights Reserved. Powered by DEVSOARTECH            豫ICP备11002312号-2

豫公网安备 41010502002439号