Capture d'écran du module div JS et implémentation de la fonction de téléchargement

Cet article présente principalement l'implémentation JS de la fonction de capture d'écran et de téléchargement du module p. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

Nous devons d'abord introduire 2 fichiers js :

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

Ajouter un style CSS, principalement pour générer l'icône d'image de fermeture "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);
}

Écrivez-le dans n'importe quel module p et cliquez sur le bouton de capture d'écran à n'importe quel endroit

<!-- 要截图的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>

Le l'effet de page est le suivant :

Le code js est le suivant :

$("#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;
}

Explication : Le noyau le code de capture d'écran ici est la méthode

html2canvas（dom, {  onrendered: function(canvas) {}) fournie par le plug-in. Parmi eux : dom est le module d'élément dont vous souhaitez prendre une capture d'écran

. Sa fonction est de transformer ce canevas de paramètres en un élément d'image img. Ce qu'on appelle est une méthode convertCanvasToImage（） distincte,

parmi laquelle : image.src = canvas.toDataURL("image/png"); Cette phrase est l'adresse de l'image générée. Et cette image est votre élément intercepté. Elle est facile à gérer avec l'adresse de l'image. Je viens de l'ajouter à l'élément id="dw" pour fournir l'effet d'affichage. En fait, cela suffit, mais je l'ai réinstallé avec de la toile.

La méthode de chargement de l'image est donnée plus tard : onload(), ajoutez-y des attributs, et exécutez automatiquement la méthode de téléchargement : faites la distinction entre le navigateur IE (méthode trouvée en ligne) et la méthode de téléchargement que j'ai directement générée. Il existe de nombreuses façons de télécharger, vous pouvez choisir comme vous le souhaitez.

Bien sûr, ma propre méthode de téléchargement (src) est également applicable à IE. Car le principe est très simple, il suffit de générer un élément et d’appeler soi-même la méthode.

Recommandations associées :

PHP appelle ffmpeg pour prendre des captures d'écran vidéo et assembler des exemples de script à partager

Utiliser automatiquement le Web Interface API de capture d'écran de page Exemple de génération de captures d'écran de page Web

captures d'écran du navigateur HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!