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 模塊，我隨便位置給的點擊截圖按鈕

<div style="background: red;width: 68px;text-align: center;" onclick="doScreenShot()">截圖</div>
<!-- 要截圖的div sfeg -->
<div id="main" style="width: 98%;padding: 50px;background: #5a90a0">
　　<div id="sfeg" style="width: 800px;max-height: 2000px;overflow: auto;background: #fff"> </div>
</div>
<!--展示的div-->
<div id="dw" >
　　<div class="offno" title="關閉" onclick="closeok()"><div class="close"></div></div>
　　<div id="imgcanvas"></div>
</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
作者：漠北桑海