利用javascript实现页面截图

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

兼容性：
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
        })
   })

• 以上代码当你点击按钮button时，页面会自动复制一份$(“.myImg”) 放在插入到body后面，