html2canvas網頁截圖

07-03

html2canvas網頁截圖，有需要的朋友可以參考下。

html2canvas工具請自行搜索:

將相應的引入的js庫的路徑改變後存到本地即可使用:

HTML頁面一:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head>  <script type="text/javascript" src="./WEB-INF/JS/html2canvas.js"></script> <script type="text/javascript" src="./WEB-INF/JS/base.js"></script> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <script type="text/javascript">$(function(){ alert("函數調用成功"); html2canvas(document.body, { onrendered : function(canvas) { document.body.appendChild(canvas); } });});</script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style>.feedback-overlay-black { background-color: #000; opacity: 0.5; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;}</style> <style>div { padding: 20px; margin: 0 auto; border: 5px solid black;}h1 { border-bottom: 2px solid white;}h2 { background: #efefef; padding: 10px;}</style> </head> <body> <div style="background: red;"> <div style="background: green;"> <div style="background: blue; border-color: white;"> <div style="background: yellow;"> <div style="background: orange;"> <h1> Heading </h1> Text that isn"t wrapped in anything. <p> Followed by some text wrapped in a <b><p> paragraph.</b> </p> Maybe add a <a href="#">link</a> or a different style of <a href="#" style="background: white;" id="highlight">link with a highlight</a>. <hr /> <h2> More content </h2> <div style="width: 10px; height: 10px; border-width: 10px; padding: 0;"> a </div> </div> </div> </div> </div> </div> 此網頁演示了html2canvas截圖後將截圖後的網頁追加到了原網頁之上 <br> <br> 這裡可以看作是邊界線 <hr/> </body></html>

第二個示例:

將網頁截圖下載:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head>  <script type="text/javascript" src="./WEB-INF/JS/html2canvas.js"></script> <script type="text/javascript" src="./WEB-INF/JS/jquery-1.6.2.js"></script> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <script type="text/javascript">$(function(){ print();});function print(){ html2canvas( $("body") , { onrendered: function(canvas) { $("#down_button").attr( "href" , canvas.toDataURL() ) ; $("#down_button").attr( "download" , "myjobdeer.png" ) ; //$("#down_button").css("display","inline-block"); } });}</script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> 此網頁演示了html2canvas截圖後將截圖後的網頁追加到了原網頁之上 <br> <br> 這裡可以看作是邊界線 <hr/><a type="button" id="down_button">下載</a> </body></html>