360SDN.COM

利用javascript实现页面截图(html2canvas的用法)

来源:  2018-08-21 19:39:06    评论:0点击:

今天我来总结一下怎么利用javascript实现页面截图,这是我在公司项目中遇到过的问题。

 html2canvas可以通过纯JS对浏览器端经行截屏,但截图的精确度还有待提高,部分css不可识别,所以在canvas中不能完美呈现原画面样式
  • 1
  • 2

兼容性:
Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Safari 6+

**有以下问题:**
    • 不支持iframe
    • 不支持跨域图片
    • 不能在浏览器插件中使用
    • 不支持Flash
    • 不支持古代浏览器和IE

    一、首先我们需要个插件:
    1. html2canvas.min.js 下载地址:http://download.csdn.net/detail/webxiaoma/9853415

    2.引入cdn :http://www.bootcdn.cn/html2canvas/

    二、插件有了,接下来我们一步一步讲解:

    首先我们先做一个复制网页的练习(需要引入html2canvas.min.js)
     

     <a type="button" id="down_button"><button id="creat">点击复制图片</button></a>
    <div class="myImg" style="position:relative;">
        <img src="body_background.jpg">
    </div>
    $("#creat").click(function(){
        html2canvas($("body"),{ // $(".myImg")是你要复制生成canvas的区域,可以自己选
            onrendered:function(canvas){
                  dataURL =canvas.toDataURL("image/png");
                 $("body").append(canvas);
                  console.log(dataURL);
    
                  //下载图片
                  $('#down_button').attr( 'href' ,  dataURL ) ;
                  $('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
              },
              width:320,
              height:400
          })
     });
     
    为您推荐

    友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
     Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权