js浏览器截图

html2canvas可以通过纯JS对浏览器端经行截屏，但截图的精确度还有待提高，部分css不可识别，所以在canvas中不能完美呈现原画面样式
兼容性：
Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Safari 6+

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

一、首先我们需要个插件：
1. html2canvas.min.js 下载地址：https://github.com/niklasvh/html2canvas/releases

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

二、插件有了，接下来我们一步一步讲解：

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

<button id="tt">点我生成图片</button>
<img src="timg.jpg" style="width: 500px;height: auto;"/>
<a id="dd" href="" download="test.png">下载图片</a>

$("#tt").click(function(){
    html2canvas(document.body, {
      onrendered: function(canvas) {
        var image = canvas.toDataURL("image/png");  

        $("#dd").attr("href",image);
      },
      width: 300,
      height: 300
    });
})

这样生成的图片是base64编码

可用参数

另外js可将图片转为base64编码：

function getBase64Image(img) {
       var canvas = document.createElement("canvas");
       canvas.width = img.width;
       canvas.height = img.height;
       var ctx = canvas.getContext("2d");
       ctx.drawImage(img, 0, 0, img.width, img.height);
       var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
       var dataURL = canvas.toDataURL("image/"+ext);
       return dataURL;
}
var img = "http://127.0.0.1:8020/tets/htmlcanvas/timg.jpg";//不支持跨域地址
var image = new Image();
image.src = img;
image.onload = function(){
    var base64 = getBase64Image(image);
    console.log(base64);
}

另外可选择图片文件，并转为base64编码：

<input accept="image/*" name="upimage" id="upload_file" type="file">
<textarea id="base64_output" name="Word" style=" width:820px"></textarea>
<script type="text/javascript">
    document.getElementById("upload_file").onchange = function () {
        gen_base64();
    };
    function $_(id) {
            return document.getElementById(id);
    }
    function gen_base64() {
        var file = $_('upload_file').files[0];
        r = new FileReader();  //本地预览
        r.onload = function(){
            $_('base64_output').value = r.result;
        }
        r.readAsDataURL(file);    //Base64
    }

</script>