JS實現div模塊的截圖并下載功能

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

body{background: #ccc}
#dw{position: absolute;top: 10px;left:10%;height: 620px;width:1030px;background: #fff; border:1px solid black;padding: 10px}
.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);
}

<!-- 要截圖的div main 藍色區域 -->
<div id="main" style="width: 50%; margin-left: 100px;padding: 50px;height: 400px;background: #5a90a0">
　　<div style="height: 200px;width: 200px;background: #ccc;"></div>
　　<div style="height: 30px;width: 168px;border:2px solid black;background: red;text-align: center;" onclick="doScreenShot()">截圖</div>
</div>
<!-- 生成圖片展示的DIV dw-->
<div id="dw" >
　　<div style="float: right;width: 25px;height: 25px;" title="關閉" onclick="closeok()">
　　　　<span class="close"></span>
　　</div> 
</div>

$("#dw").hide();
//關閉圖片
function closeok(){
 $("#dw").hide();
}
//點擊截圖
function doScreenShot(){
 $("#dw").show();
 html2canvas($("#main"), {
 onrendered: function(canvas) {
 canvas.id = "mycanvas"; 
 var mainwh=$("#main").width(); 
 var mainhg=$("#main").height();
 var img = convertCanvasToImage(canvas);
 console.log(img);
 //document.body.appendChild(img);
 $("#dw").append(img) //添加到展示圖片div區域
 img.onload = function() {
 img.onload = null;
 canvas = convertImageToCanvas(img, 0, 0, 1024, 600); //設置圖片大小和位置
 img.src = convertCanvasToImage(canvas).src;
 $(img).css({
 background:"#fff" 
 });
 //調用下載方法 
 if(browserIsIe()){ //假如是ie瀏覽器 
 DownLoadReportIMG(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, 20, 20, 960, 600); //在這調整圖片中內容的顯示（大小,放大縮小,位置等）
 return canvas;
}
 function DownLoadReportIMG(imgPathURL) {
 //如果隱藏IFRAME不存在，則添加
 if (!document.getElementById("IframeReportImg"))
 $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
 if (document.all.IframeReportImg.src != imgPathURL) {
 //加載圖片
 document.all.IframeReportImg.src = imgPathURL;
 }
 else {
 //圖片直接另存為
 DoSaveAsIMG();
 }
}
function DoSaveAsIMG() {
 if (document.all.IframeReportImg.src != "about:blank")
 window.frames["IframeReportImg"].document.execCommand("SaveAs");
}
// 另存為圖片
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;
}