如何实现网页截屏（html2canvas）

零下一度 原创: 2017-05-03 16:05:14 2330浏览

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($('#xttblog'), {
          onrendered: function(canvas) {
            // canvas 是最后一个渲染的<canvas> 元素
            $('#btn').attr( 'href' , canvas.toDataURL() ) ;
            $('#btn').attr( 'download' , 'xttblog.png' ) ;
          }
        });
      }
    </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中文网其它相关文章！

截屏，html2canvas PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：利用html实现分页打印功能的实例详解下一条：利用html实现一个有点击（显示、隐藏）效果按钮的实例代码