关于js合成图片 html2canvas

来源:互联网 发布:mac双系统切换windows 编辑:程序博客网 时间:2024/06/07 03:53

https://segmentfault.com/q/1010000006054722/a-1020000006056063

关于canvas的toDataURL报错问题

  1. <html>  

  2.     <head>  
  3.         <meta name="layout" content="main"> 
  4.  
  5.         <meta http-equiv="Content-

  6. Type" content="text/html; charset=utf-8" /> 
  7.    
  8.         
  9. <script type="text/javascript" src="http://ajax.googleapis.com/aj

  10. ax/libs/jquery/1.8.3/jquery.min.js"></script> 

  11.  
  12.         
  13. <script type="text/javascript" src="http://html2canvas.hertzen.co

  14. m/build/html2canvas.js"></script>  

  15.            
  16.         <script  type="text/javascript" >  

  17.         $(document).ready( function(){  

  1.                 $(".example1").on("click", function(event) { 
  2.  
  3.                         event.preventDefault();  

  1.                         html2canvas(document.body, { 
  2.  
  3.                         allowTaint: true, 
  4.  
  5.                         taintTest: false,  

  6.                         onrendered: function(canvas) { 
  7.  
  8.                             canvas.id = "mycanvas";  
  9.                             //document.body.appendChild(canvas);  
  10.                             //生成base64图片数据  
  11.                             var dataUrl = canvas.toDataURL(); 

  12.  
  13.                             var newImg = document.createElement("img");  
  14.                             newImg.src =  dataUrl

  15.  
  16.                             document.body.appendChild(newImg);  
  17.                         }  

  18.                     });  
  19.                 });   
  20.                
  21.         });  

  1.            
  2.         </script>  

  1.     </head>  

  1.     <body>  
  2.            
  3.         Hello!  
  4.         <div class="" style="background-color: #abc;">  

  1.             html5页面截图  

  1.             <br>jsjtt.com  

  1.         </div>  

  2.            
  3.         <textArea id="textArea" col="20" rows="10" ></textArea> 

  4.  
  5.         <input class="example1" type="button" value="button"> 

  6.   

  7.     </body>  




原创粉丝点击