Heim  >  Artikel  >  Web-Frontend  >  Screenshot des JS-Div-Moduls und Download-Funktionsimplementierung

Screenshot des JS-Div-Moduls und Download-Funktionsimplementierung

小云云
小云云Original
2018-01-15 10:39:142784Durchsuche

Dieser Artikel stellt hauptsächlich die JS-Implementierung der Screenshot- und Download-Funktion des p-Moduls vor. Er ist sehr gut und hat Referenzwert. Ich hoffe, er kann jedem helfen.

Zuerst müssen wir 2 js-Dateien einführen:


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

CSS-Stil hinzufügen, hauptsächlich um das Schlussbildsymbol „X“ zu generieren:


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);
}

Schreiben Sie es in ein beliebiges p-Modul und klicken Sie an einer beliebigen Stelle auf die Screenshot-Schaltfläche


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

The Der Seiteneffekt ist wie folgt:

Der js-Code lautet wie folgt:


$("#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) //添加到展示图片p区域
   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"))
  $(&#39;<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>&#39;).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;
}

Erklärung: Der Kern Der Screenshot-Code hier ist

html2canvas(dom, {  onrendered: function(canvas) {}) Methode wird vom Plug-in bereitgestellt. Darunter: dom ist das Elementmodul, von dem Sie einen Screenshot machen möchten

Seine Funktion besteht darin, diese Parameter-Leinwand in ein IMG-Bildelement umzuwandeln. Was aufgerufen wird, ist eine separate convertCanvasToImage()-Methode,

, darunter: image.src = canvas.toDataURL("image/png"); Dieser Satz ist die Adresse des generierten Bildes. Und dieses Bild ist Ihr abgefangenes Element. Mit der Bildadresse ist es einfach zu handhaben. Ich habe es einfach zum Element id="dw" hinzugefügt, um den Anzeigeeffekt bereitzustellen. Tatsächlich reicht das aus, aber ich habe es erneut mit Canvas installiert.

Die Methode zum Laden von Bildern wird später angegeben: onload (), fügen Sie Attribute hinzu und führen Sie die Download-Methode automatisch aus: Unterscheiden Sie zwischen dem IE-Browser (online gefundene Methode) und der Download-Methode, die ich direkt generiert habe. Es gibt viele Möglichkeiten zum Herunterladen, Sie können nach Belieben auswählen.

Natürlich ist meine eigene Download-Methode (src) auch auf den IE anwendbar. Da das Prinzip sehr einfach ist, generieren Sie einfach ein Element und rufen Sie die Methode selbst auf.

Verwandte Empfehlungen:

PHP ruft ffmpeg auf, um Video-Screenshots und Splice-Skriptbeispiele zum Teilen zu erstellen

Automatisch das Web nutzen Seiten-Screenshot API-Schnittstelle Beispiel für die Erstellung von Webseiten-Screenshots

HTML5-Browser-Screenshots

Das obige ist der detaillierte Inhalt vonScreenshot des JS-Div-Moduls und Download-Funktionsimplementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn