利用javascript实现页面截图（html2canvas的用法）

今天我来总结一下怎么利用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后面，