html5 实现网页截屏页面生成图片(图文)

来源：互联网发布：sql 2005 sp4 中文版编辑：程序博客网时间：2024/09/21 08:15

html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。

因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。

环境要求: jQuery
兼容性: Firefox 3.5+, Chrome, Opera, IE9

官网主页: http://html2canvas.hertzen.com/

测试生成的图片效果有些元素的样式没有完全展示出来

js插件实现网页截屏页面生成图片

<html>    <head>        <meta name="layout" content="main">        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />          <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.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);

<span style="white-space:pre"></span>    window.open(newImg.src);                        }                    });                });                      });                 </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>

上面的是截取标签BODY内的内容，如果想截取指定DIV内的内容则如下配置：

<html>    <head>        <meta name="layout" content="main">        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />          <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.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.getElementById("textArea"), {                        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);

<span style="white-space:pre"></span>    window.open(newImg.src);                        }                    });                });                      });                 </script>    </head>    <body>                 Hello!        <div class="" style="background-color: #abc;">            计算机天堂测试html5页面截图            <br>jsjtt.com        </div>                 <textArea id="textArea" col="20" rows="10" ></textArea>        dddddd        <input class="example1" type="button" value="button">        生成界面如下：    </body></html>

0 1

html5 实现网页截屏 页面生成图片(图文)

html5 实现网页截屏页面生成图片(图文)