créer une capture d'écran de la page Web en utilisant html2canvas (incapable d'initialiser correctement)
j'essaie d'utiliser http://html2canvas.hertzen.com/ pour prendre des captures d'écran de ma page web. Je ne peux pas initialiser un élément canvas en utilisant...
var canvas = $('body').html2canvas();
si j'étais capable d'obtenir une toile appropriée je suivrais avec quelque chose comme
var dataUrl = canvas.toDataURL(); //get's image string
window.open(dataUrl); // display image
malheureusement, les documentations sont très limitées IMO. http://html2canvas.hertzen.com/documentation.html . Je ne crois pas que j'ai besoin pour précharger car je n'utilise pas de graphiques dynamiques (mais ne va même pas aussi loin de toute façon)
je suis tout simplement trop nul pour comprendre si ce gars a du succès avec capture d'écran en utilisant html2canvas
il semble que je n'aille pas plus loin que lui.. comment télécharger une capture d'écran en utilisant html2canvas?
ma solution idéale serait de montrer comment créer screenshot avec un minimum de code. (Copier html à canvas. obtenez la chaîne de toDataURL. chaîne de sortie)
TOUTE idée est GRANDEMENT apprécié =)
5 réponses
Vous devriez 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 comprendre, comment l'utiliser correctement.
Le {elements:{length:1}} est nécessaire, en raison de la mise en œuvre incomplète du plugin, sinon vous obtiendrez une erreur.
bonne chance!
vous pouvez également utiliser ce qui suit:
var html2obj = html2canvas($('body'));
var queue = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();
window.open(img);
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);
}
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, spécifiquement un div container. J'ai donc fait ce qui suit:
html2canvas($('#myDiv'), {
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
Pour les personnes à la recherche de la même question, si les options ci-dessus ne permettent pas de, j'espère que ce sera.
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 d'obtenir les éléments de canevas.