用HTML5实现网页截屏直接生成图片(图文)

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

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

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

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

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

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

[html] view plain copy

  1. <html>

  2. <head>

  3. <metaname="layout"content="main">

  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

  5. <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"</script>

  6. <scripttype="text/javascript"src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>

  7. <scripttype="text/javascript">

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

  9. $(".example1").on("click",function(event){  

  10. event.preventDefault();  

  11. html2canvas(document.body,{  

  12. allowTaint: true,  

  13. taintTest: false,  

  14. onrendered: function(canvas){  

  15. canvas.id = "mycanvas";  

  16. //document.body.appendChild(canvas);  

  17. //生成base64图片数据  

  18. var dataUrl = canvas.toDataURL();  

  19. var newImg = document.createElement("img");  

  20. newImg.src =  dataUrl;  

  21. document.body.appendChild(newImg);  

  22. }  

  23. });  

  24. });   

  25. });  

  26. </script>

  27. </head>

  28. <body>

  29. Hello!  

  30. <divclass=""style="background-color: #abc;">

  31. 计算机天堂测试html5页面截图  

  32. <br>jsjtt.com  

  33. </div>

  34. <textAreaid="textArea"col="20"rows="10"></textArea>

  35. <inputclass="example1"type="button"value="button">

  36. 生成界面如下:  

  37. </body>

  38. </html>

说明在测试过程中出现的问题如果页面上引用跨域的图片文件调用toDataURL的时候会出错

SecurityError: The operation is insecure.  

解决方法:在跨域的服务器上设置header设置为允许跨域请求

[html] view plain copy

  1. access-control-allow-origin: * access-control-allow-credentials:true