web-dev-qa-db-fra.com

Comment faire une capture d'écran en html avec javascript?

Je suis novice en html et javascript. Et j'essaie de prendre une capture d'écran de ma page html et de l'enregistrer en tant que fichier jpg ou png.

Voici mon image html enter image description here

Je veux prendre une capture d'écran du côté droit (coloré en gris) avec ces glisser-déposer divs en appuyant sur le bouton Enregistrer l'image dans le coin droit de l'image.

Comment puis-je prendre une capture d'écran avec html et javascript? J'ai vu quelques html2canvas mais ce n'est pas ce que je veux. Je pense..

Quelqu'un a-t-il une idée pour cela?

Merci,

p.s. si vous voulez le code de mon html, je peux [~ # ~] éditer [~ # ~]

javascripthtmlscreenshot
5
paulc1111

Vous pouvez uniquement capturer des images ou des images vidéo sous forme de capture d'écran à l'aide de Canvas. Mais si vous voulez capturer un élément particulier sur une page Web, essayez une bibliothèque comme celle-ci: html2canvas

Voici le code:

Remarque: Ajustez soigneusement les dimensions dans la fonction drawImage () 

$(".drag").draggable();
$(".drag").droppable();
var takeScreenShot = function() {
    html2canvas(document.getElementById("container"), {
        onrendered: function (canvas) {
            var tempcanvas=document.createElement('canvas');
            tempcanvas.width=350;
            tempcanvas.height=350;
            var context=tempcanvas.getContext('2d');
            context.drawImage(canvas,112,0,288,200,0,0,350,350);
            var link=document.createElement("a");
            link.href=tempcanvas.toDataURL('image/jpg');   //function blocks CORS
            link.download = 'screenshot.jpg';
            link.click();
        }
    });
}
#container{
    width:400px;
    height:200px;
}
#rightcontainer{
    width:300px;
    height:200px;
    background:gray;
    color:#fff;
    margin-left:110px;
    padding:10px;
}
#leftmenu{
    color:#fff;
    background-color:green;
    width:100px;
    height:200px;
    position:fixed;
    left:0;
    padding:10px;
}

button{
    display:block;
    height:20px;
    margin-top:10px;
    margin-bottom:10px;
}
.drag{
  width:40px;
  height:20px;
  background-color:blue;
  z-index:100000;
  margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  
  
<button onclick="takeScreenShot()">Snapshot</button>
<div id="container">
    <div id="leftmenu">
      Left Side
      <div class="drag">
      </div>
      <div class="drag">
      </div>
      <div class="drag">
      </div>
      Drag----------->
            &
      Click Snapshot
    </div>
    <div id="rightcontainer">
        Right Side
    </div>
</div>
17
Gaurav Chaudhary