JS實(shí)現(xiàn)div模塊的截圖并下載功能

當(dāng)需要實(shí)現(xiàn)html頁面部分模塊截圖并具有保存圖片功能時，前臺直接生成截圖并下載會方便的多。多的不說，直接看代碼

創(chuàng)新互聯(lián)公司主營華坪網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā),華坪h5小程序制作搭建,華坪網(wǎng)站營銷推廣歡迎華坪等地區(qū)企業(yè)咨詢

首先我們需要引入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"關(guān)閉圖片圖標(biāo)：

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

<!-- 要截圖的div main 藍(lán)色區(qū)域 -->
<div id="main" >
　　<div ></div>
　　<div  onclick="doScreenShot()">截圖</div>
</div>
<!-- 生成圖片展示的DIV dw-->
<div id="dw" >
　　<div  title="關(guān)閉" onclick="closeok()">
　　　　<span class="close"></span>
　　</div> 
</div>

頁面效果如下：

JS實(shí)現(xiàn)div模塊的截圖并下載功能

js代碼如下:

$("#dw").hide();
//關(guān)閉圖片
function closeok(){
 $("#dw").hide();
}
//點(diǎn)擊截圖
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區(qū)域
   img.onload = function() {
    img.onload = null;
    canvas = convertImageToCanvas(img, 0, 0, 1024, 600); //設(shè)置圖片大小和位置
    img.src = convertCanvasToImage(canvas).src;
    $(img).css({
     background:"#fff"  
    });
    //調(diào)用下載方法 
     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元素，相當(dāng)于做了一個裝相片的框架
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); //在這調(diào)整圖片中內(nèi)容的顯示（大小,放大縮小,位置等）
 return canvas;
}
 function DownLoadReportIMG(imgPathURL) {
 //如果隱藏IFRAME不存在，則添加
 if (!document.getElementById("IframeReportImg"))
  $('<iframe  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;
}

解釋說明：這里核心截圖代碼是

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

它的作用是把這個參數(shù)canvas形成一個img圖片元素。調(diào)用的是單另的convertCanvasToImage（）方法，

其中： image.src = canvas.toDataURL("image/png");這句就是生成圖片的地址。而這個圖片就是截取的你的那個元素，有了圖片地址就很好辦了。我只是把它添加到id=“dw”這個元素中提供展示效果。其實(shí)做到這樣就夠了，但我又用canvas裝了一遍。

后面給圖片加載方法：onload （）在其中添加屬性撒的，自動執(zhí)行下載方法：區(qū)分了ie瀏覽器（網(wǎng)上找的方法），還有我直接生成的下載方法。關(guān)于下載方法很多，你們隨意選。

當(dāng)然自己的這個download(src)下載方法同樣適用ie。因?yàn)樵砗芎唵?，就是用生成個元素自己調(diào)用方法。

總結(jié)

以上所述是小編給大家介紹的S實(shí)現(xiàn)div模塊的截圖并下載功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站名稱：JS實(shí)現(xiàn)div模塊的截圖并下載功能
標(biāo)題網(wǎng)址：http://chinadenli.net/article22/giepcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、電子商務(wù)、靜態(tài)網(wǎng)站、全網(wǎng)營銷推廣、軟件開發(fā)、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

JS實(shí)現(xiàn)div模塊的截圖并下載功能