JQ實(shí)現(xiàn)Div中的內(nèi)容轉(zhuǎn)換為圖片并且下載到本地
發(fā)布日期：2022/1/2 8:13:42 瀏覽量：
1.引入jqury
2.引入js插件html2canvas.min.js下載地址：http://webscripts.softpedia.com/script/Development-Scripts-js/html2canvas-74663.html
<html> <meta charset="utf-8"> <head> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/html2canvas.min.js"></script> <style> 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); } </style> </head> <body> <!-- 要截圖的div main 藍(lán)色區(qū)域 --> <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> <div style="height: 30px;width: 168px;border:2px solid black;background: red;text-align: center;" onclick="doScreenShot()">截圖</div> <!-- 生成圖片展示的DIV dw--> <div id="dw" > <div style="float: right;width: 25px;height: 25px;" title="關(guān)閉" onclick="closeok()"> <span class="close"></span> </div> </div> </body> <script> $("#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)于做了一個(gè)裝相片的框架 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 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; } </script> </html>
業(yè)務(wù)實(shí)施流程 馬上咨詢： 如果您有業(yè)務(wù)方面的問題或者需求，歡迎您咨詢！我們帶來的不僅僅是技術(shù)，還有行業(yè)經(jīng)驗(yàn)積累。
QQ: 39764417/308460098 Phone: 13 9800 1 9844 / 135 6887 9550 聯(lián)系人：石先生/雷先生