web-dev-qa-db-fra.com

créer une capture d'écran de la page Web à l'aide de html2canvas (impossible de s'initialiser correctement)

J'essaie d'utiliser http://html2canvas.hertzen.com/ pour prendre des captures d'écran de ma page Web. Je ne parviens pas à initialiser un élément canvas à l'aide de ...

var canvas = $('body').html2canvas();

Si je pouvais obtenir une bonne toile, je suivrais avec quelque chose comme

var dataUrl = canvas.toDataURL(); //get's image string
window.open(dataUrl);             // display image

Malheureusement, la documentation est très limitée OMI. http://html2canvas.hertzen.com/documentation.html . Je ne pense pas avoir besoin de précharger car je n'utilise pas de graphiques dynamiques (mais je ne suis même pas allé aussi loin de toute façon)

Je suis tout simplement trop noob pour comprendre si ce type a du succès avec capture d'écran en utilisant html2canvas

Je ne semble pas aller plus loin que ce type .. Comment télécharger une capture d'écran en utilisant html2canvas?

Ma solution idéale serait de montrer comment créer une capture d'écran avec un code minimal. (Copiez html dans canvas. Get toDataURL string. Output string)

N'IMPORTE QUELLE perspicacité est TRÈS appréciée =)

javascripthtmlscreenshothtml2canvas
17
mattyd

Vous devez l'utiliser de cette façon:

$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL();
window.open(img);

Il m'a fallu quelques heures pour le comprendre, comment l'utiliser correctement. Le {elements:{length:1}} est requis, en raison d'une implémentation incomplète du plugin, sinon vous obtiendrez une erreur.

Bonne chance!

19
Slavik Meltser

Vous pouvez également utiliser les éléments suivants:

var html2obj = html2canvas($('body'));

var queue  = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();

window.open(img);
12
Aley

Pour obtenir juste une partie de la page, vous pouvez l'utiliser de cette façon:

$('#map').html2canvas({
onrendered: function( canvas ) {
  var img = canvas.toDataURL()
  window.open(img);
}
9
Niklas Hoesl

C'est ce qui a fonctionné pour moi.

html2canvas(document.body, {
   onrendered: function(canvas) {
     var img = canvas.toDataURL()
     window.open(img);
  }
});

Cela a créé une nouvelle fenêtre pour la capture d'écran.

Je ne voulais qu'une partie de ma page dans la capture d'écran, en particulier une div de conteneur. J'ai donc fait ce qui suit:

html2canvas($('#myDiv'), {
   onrendered: function(canvas) {
     var img = canvas.toDataURL()
     window.open(img);
  }
});

Pour les personnes recherchant la même question, si les options ci-dessus ne vous aident pas, nous espérons que ce sera le cas.

8
ckpepper02

Vous pouvez utiliser le code suivant pour capturer une capture d'écran et télécharger la capture d'écran.

création de bouton html

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button>
<a id="test"></a>
<div id="box1"></div>

définition de la fonction

<script type="text/javascript">                         
function genScreenshot() {
html2canvas(document.body, {
  onrendered: function(canvas) {
  $('#box1').html("");

  if (navigator.userAgent.indexOf("MSIE ") > 0 || 
                navigator.userAgent.match(/Trident.*rv\:11\./)) 
        {
    var blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob,'Test file.png');
  }
  else {
    $('#test').attr('href', canvas.toDataURL("image/png"));
    $('#test').attr('download','screenshot.png');
    $('#test')[0].click();
  }


  }
});
}  
</script>

note: J'ai créé un bouton html où j'ai appelé la fonction. test est un attribut et box1 est pour récupérer les éléments du canevas.

1
User1493