집 >웹 프론트엔드 >HTML 튜토리얼 >웹 페이지의 스크린샷을 찍는 방법(html2canvas)

웹 페이지의 스크린샷을 찍는 방법(html2canvas)

零下一度원래의: 2017-05-03 16:05:142825검색

html2canvas는 html5 및 css3의 몇 가지 새로운 기능을 사용하여 클라이언트에서 웹 페이지의 스크린샷을 찍는 기능을 구현하는 매우 훌륭한 JavaScript 클래스 라이브러리입니다. html2canvas는 페이지의 DOM과 요소의 스타일 정보를 얻고 이를 캔버스 이미지로 렌더링하여 페이지의 스크린샷을 찍는 기능을 수행합니다. 각 브라우저는 페이지를 다르게 렌더링하므로 생성되는 이미지도 다릅니다. 아직 개발 단계이긴 하지만 기대해볼만한 가치가 있습니다. 서버에서의 렌더링이 필요하지 않으며 전체 이미지가 클라이언트 브라우저에서 생성됩니다. 브라우저가 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：html을 사용하여 페이징 인쇄 기능을 구현하는 자세한 예다음 기사：html을 사용하여 페이징 인쇄 기능을 구현하는 자세한 예