js 实现div模块的截图并下载功能（可制作长图）

当需要实现html页面部分模块截图并具有保存图片功能时，前台直接生成截图并下载会方便的多。多的不说，直接看代码
首先我们需要引入2个js文件：

 <script type="text/javascript" src="js/html2canvas.js"></script>

 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

加入css 样式，主要是生成"X"关闭图片图标：

body{background: #ccc}
#dw{
position: absolute;
left: 18%;
top: 8px;
background: #88f9ab;
width: 60%;
border: 1px solid black;
padding: 16px;
height: 93%;
overflow-y: auto;
z-index: 220;
}
.close{
position:relative;
left: 10px;
width:0.2em;
height:1em;
background: #333;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: inline-block;
}
.close:after{
content: "";
position: absolute;
top: 0;
left: 0;
width:0.2em;
height:1em;
background: #333;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
#imgcanvas{
width: 100%;
height:100%;
overflow-y: auto;
background: #fff;
max-height: 4020px;
margin: 0 auto;
}
.offno{
width: 23px;
height: 23px;
position: absolute;
top: 1px;
right: 0px;
}

写入随便div 模块，我随便位置给的点击截图按钮

先初始化执行：

(function  start(){

	$("#dw").hide();

	var maindiv=document.getElementById('sfeg');

	for(var i=0;i<20;i++){

	var  jeq='<div  style="margin:4px 2px auto;background:blue;width:300px;height:60px">'+i+'</div>';

		$(maindiv).append(jeq);

	}

}

())

通过for循环主要是生成一个很长的div。然后截取这个div元素

截取的js代码如下:

//截图

function doScreenShot(){

    $("#dw").show();

    $("#imgcanvas").empty();

    html2canvas($("#sfeg"), {

        onrendered: function(canvas) {

            canvas.id = "mycanvas";

            var mainwh=$("#main").width();//获取元素的宽

            var mainhg=$("#main").height(); //获取元素高，若是做长图可以将此参数传递给canvas的高

           var img = convertCanvasToImage(canvas);

           $("#imgcanvas").append(img) ; //添加到展示图片div区域

           img.onload = function() {

               img.onload = null;

               canvas = convertImageToCanvas(img, 0, 0, mainwh, mainhg);  //设置图片大小和位置

                img.src = convertCanvasToImage(canvas).src; //重新给了一个路径，若不需要，则和上面那句都可以注释掉。

              $(img).css({

                    background:"#fff"

                });

                //调用下载方法

                    if(browserIsIe()){  //假如是ie浏览器

                        DownLoadReportIMG('下载.jpg',img.src);

                    }else{

                        download(img.src)  //下载图片

                    }

                }

            }

    });

}

//绘制显示图片

function convertCanvasToImage(canvas) {

    var image = new Image();

    image.src = canvas.toDataURL("image/png"); //生成图片地址

    return image;

}

//生成canvas元素

function convertImageToCanvas(image, startX, startY, width, height) {

    var canvas = document.createElement("canvas");

    canvas.width =  width;

    canvas.height = height;

    canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, width, height);//在这调整图片中内容的显示（大小,放大缩小,位置等）

    return canvas;

}// 另存为图片

function download(src) {

    var $a = $("<a></a>").attr("href", src).attr("download", "img.png");

    $a[0].click();

}

//判断是否为ie浏览器

function browserIsIe() {

    if (!!window.ActiveXObject || "ActiveXObject" in window)

        return true;

    else

        return false;

}

单另更新ie兼容，下载64Base图片：

 function DownLoadReportIMG(fileName,imgPathURL) {

    var blob = base64Img2Blob(imgPathURL);

    //ie11及以上

    window.navigator.msSaveBlob(blob, fileName);

}

function base64Img2Blob(code){

        var parts = code.split(';base64,');

        var contentType = parts[0].split(':')[1];

        var raw = window.atob(parts[1]);

        var rawLength = raw.length;

        var uInt8Array = new Uint8Array(rawLength);

        for (var i = 0; i < rawLength; ++i) {

          uInt8Array[i] = raw.charCodeAt(i);

        }

        return new Blob([uInt8Array], {type: contentType});

    }

解释说明：这里核心截图代码是

html2canvas（dom, { onrendered: function(canvas) {})方法，是插件提供的。其中：dom是你要截图的元素模块

它的作用是把这个参数canvas形成一个img图片元素。调用的是单另的convertCanvasToImage（）方法，

其中： image.src = canvas.toDataURL("image/png");这句就是生成图片的地址。而这个图片就是截取的你的那个元素，有了图片地址就很好办了。我只是把它添加到id=“imgcanvas

”这个元素中提供展示效果。

后面给图片加载方法：onload （）在其中添加属性撒的，自动执行下载方法：区分了ie浏览器（估计这个ie兼容不太好找，我之前写的没有用，也没测试，现在更新好了），还有我直接生成的下载方法download（）

。关于下载方法很多，你们随意选。

效果图：绿色区域是展示区，其中图片很长，我用滚动条展示了。

本文为作者原创，如有转载请标明文章出处：
http://www.cnblogs.com/mobeisanghai/p/7682463.html
作者：漠北桑海