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

  1. <html>  
  2.     <head>  
  3.         <meta name="layout" content="main">  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  5.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  6.         <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>  
  7.            
  8.         <script  type="text/javascript" >  
  9.         $(document).ready( function(){  
  10.                 $(".example1").on("click", function(event) {  
  11.                         event.preventDefault();  
  12.                         html2canvas(document.body, {  
  13.                         allowTaint: true,  
  14.                         taintTest: false,  
  15.                         onrendered: function(canvas) {  
  16.                             canvas.id = "mycanvas";  
  17.                             //document.body.appendChild(canvas);  
  18.                             //生成base64图片数据  
  19.                             var dataUrl = canvas.toDataURL();  
  20.                             var newImg = document.createElement("img");  
  21.                             newImg.src =  dataUrl;  
  22.                             document.body.appendChild(newImg);  
  23.                         }  
  24.                     });  
  25.                 });   
  26.                
  27.         });  
  28.            
  29.         </script>  
  30.     </head>  
  31.     <body>  
  32.            
  33.         Hello!  
  34.         <div class="" style="background-color: #abc;">  
  35.             计算机天堂测试html5页面截图  
  36.             <br>jsjtt.com  
  37.         </div>  
  38.            
  39.         <textArea id="textArea" col="20" rows="10" ></textArea>  
  40.         <input class="example1" type="button" value="button">  
  41.         生成界面如下：  
  42.     </body>  
  43. </html>  
 
 
不明白的可以咨询老蚂蚁技术部：18107823062
posted @ 2018-01-12 10:47  老蚂蚁网络  阅读(304)  评论(0)  编辑  收藏  举报