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

首页 » 建站秘籍 » 2016年7月21日上午【百度已收录】

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

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

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

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

以下为全部代码：

<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);
                        }
                    });
                }); 
             
        });
         
        </script>
    </head>
<body>
    
hello~
<br />
<table width="98%" border="5" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">1</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">2</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">3</td>
  </tr>
  <tr>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">4</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">5</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">6</td>
  </tr>
  <tr>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">7</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">8</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">9</td>
  </tr>
  <tr>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">10</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">11</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">12</td>
  </tr>
  <tr>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">13</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">14</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#0099FF">15</td>
  </tr>
</table>

 
    <input class="example1" type="button" value="在线生成图片，需手动另存为">
        生成界面如下
        
        
        
        ：
</body>
</html>

Plugins by ewCEO.com

本文标签：这篇文章木有标签

版权声明：若无特殊注明，本文皆为《傲世零零》原创，转载请保留文章出处。
本文链接：html5 实现网页截屏页面生成图片 http://www.wangjunjiang.com/?post=51

正文到此结束

html5 实现网页截屏页面生成图片 - 傲世零零个人技术网站

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

IIS请求筛选模块被配置为拒绝超过请求内容长度的请求

实时计算输入框内的数据（加减乘除），并显示在另一个输入框内

发表吐槽

你肿么看？

IIS请求筛选模块被配置为拒绝超过请求内容长度的请求

实时计算输入框内的数据（加减乘除），并显示在另一个输入框内

热门推荐

发表吐槽

你肿么看？