移动端截屏插件

最新推荐文章于 2024-08-11 16:25:34 发布

沐雨091

最新推荐文章于 2024-08-11 16:25:34 发布

阅读量2.2k

点赞数 1

分类专栏：微信开发

本文链接：https://blog.csdn.net/cx091/article/details/78673218

版权

微信开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

移动端截屏插件

本来想小程序用无奈，小程序不支持jq

<!DOCTYPE html>
<html>
  <head >
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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>
    <div 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>
    </div>
  </body>
</html>