|
html2canvas網(wǎng)頁截圖,，有需要的朋友可以參考下。 html2canvas工具請自行搜索: 將相應(yīng)的引入的js庫的路徑改變后存到本地即可使用: HTML頁面一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <!--此網(wǎng)頁演示了html2canvas截圖后將截圖后的網(wǎng)頁追加到了原網(wǎng)頁之上 --> <head> <!-- base.js實際上是jquery庫,html2canvas.js是html2canvas自帶的js庫 --> <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"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!--需要注意的是,這里一定要等待js庫和網(wǎng)頁加載完畢后再執(zhí)行函數(shù) --> <script type="text/javascript"> $(function(){ alert("函數(shù)調(diào)用成功"); 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> 此網(wǎng)頁演示了html2canvas截圖后將截圖后的網(wǎng)頁追加到了原網(wǎng)頁之上 <br> <br> 這里可以看作是邊界線 <hr/> </body> </html> 第二個示例: 將網(wǎng)頁截圖下載: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <!--此網(wǎng)頁演示了html2canvas網(wǎng)頁截圖下載 --> <head> <!-- base.js實際上是jquery庫,html2canvas.js是html2canvas自帶的js庫 --> <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"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!--需要注意的是,這里一定要等待js庫和網(wǎng)頁加載完畢后再執(zhí)行函數(shù) --> <!-- html2canvas()中,第一個參數(shù)是要截圖的Dom對象,，第二個參數(shù)時渲染完成后回調(diào)的canvas對象,。 --> <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> 此網(wǎng)頁演示了html2canvas截圖后將截圖后的網(wǎng)頁追加到了原網(wǎng)頁之上 <br> <br> 這里可以看作是邊界線 <hr/> <a type="button" id="down_button">下載</a> </body> </html> |
|
|
來自： ProgramCat > 《待分類1》
