當需要實現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;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 模塊，我隨便位置給的點擊截圖按鈕
<!-- 要截圖的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>
頁面效果如下：
js代碼如下:
$("#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;}解釋說明：這里核心截圖代碼是
html2canvas（dom, { onrendered: function(canvas) {})方法，是插件提供的。其中：dom是你要截圖的元素模塊
它的作用是把這個參數canvas形成一個img圖片元素。調用的是單另的convertCanvasToImage（）方法，
其中： image.src = canvas.toDataURL("image/png");這句就是生成圖片的地址。而這個圖片就是截取的你的那個元素，有了圖片地址就很好辦了。我只是把它添加到id=“dw”這個元素中提供展示效果。其實做到這樣就夠了，但我又用canvas裝了一遍。
后面給圖片加載方法：onload （）在其中添加屬性撒的，自動執行下載方法：區分了ie瀏覽器（網上找的方法），還有我直接生成的下載方法。關于下載方法很多，你們隨意選。
當然自己的這個download(src)下載方法同樣適用ie。因為原理很簡單，就是用生成個元素自己調用方法。
總結
以上所述是小編給大家介紹的S實現div模塊的截圖并下載功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
