首頁 > 文章 > web前端 > 如何實現網頁截圖（html2canvas）

如何實現網頁截圖（html2canvas）

零下一度原創: 2017-05-03 16:05:142778瀏覽

html2canvas是一個相當不錯的JavaScript類別庫，它使用了html5和css3的一些新功能特性，實現了在客戶端對網頁進行截圖的功能。 html2canvas透過取得頁面的DOM和元素的樣式訊息，並將其渲染成canvas圖片，從而實現給頁面截圖的功能。因為每個瀏覽器渲染頁面的方式都不盡相同，所以產生的圖片也不太一樣。雖然它目前還是處理開發階段，但還是很值得期待的。它不需要來自伺服器任何渲染，整張圖片都是在客戶端瀏覽器建立。當瀏覽器不支援Canvas時，將採用Flashcanvas或ExplorerCanvas技術取代實作。
github：github.com/niklasvh/html2canvas
程式碼如下：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5实现网页截屏</title>
    <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script>
      function taoge(){
        html2canvas($(&#39;#xttblog&#39;), {
          onrendered: function(canvas) {
            // canvas 是最后一个渲染的<canvas> 元素
            $(&#39;#btn&#39;).attr( &#39;href&#39; , canvas.toDataURL() ) ;
            $(&#39;#btn&#39;).attr( &#39;download&#39; , &#39;xttblog.png&#39; ) ;
          }
        });
      }
    </script>
  </head>
  <body>
    <p id="xttblog">
      <img src="http://www.xttblog.com/wp-content/uploads/2016/03/123.png"/>
      <p>业余草，做专业的IT学习交流网站</p>
      <p>QQ群：135430763</p>
      <p>原文地址：http://www.xttblog.com/?p=261</p>
      <a href="" id="btn" onclick="taoge();">截图</a>
    </p>
  </body>
</html>

以上是如何實現網頁截圖（html2canvas）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：利用html實現分頁列印功能的實例詳解下一篇：利用html實現分頁列印功能的實例詳解

看更多