web-dev-qa-db-fra.com

Comment définir la taille de l'image rendue

Je ne sais pas comment désigner la taille de l'image générée par html2canvas. Par exemple, j'aimerais pouvoir garder mon DIV 400px x 400px mais que l'image rendue soit 1200px x 1200px. J'ai regardé à la documentation mais je ne comprends pas comment l'appliquer. J'ai essayé d'ajouter a.width: 1200; a.height: 1200; sans chance.

Qu'est-ce que je fais mal?

Ma fonction de sauvegarde, depuis mon JS: 

$('#save').click(function() {
  html2canvas($('#imagesave'), {
    onrendered: function(canvas) {
      var a = document.createElement('a');
      a.href = canvas.toDataURL("image/png");
      a.download = 'myfile.png';
      a.click();
    }
  });
});

[~ # ~] html [~ # ~] 

<div id="imagesave">
...
</div>

<button id="save">Save</button>

[~ # ~] css [~ # ~] 

#imagesave {
  background-color: white;
  height: 400px;
  width: 400px;
}
html2canvas
8
code forever
html2canvas($('#imagesave')[0], {
  width: 1200,
  height: 1200
}).then(function(canvas) {
  var a = document.createElement('a');
  a.href = canvas.toDataURL("image/png");
  a.download = 'myfile.png';
  a.click();
});

Vous devez passer la largeur et la hauteur comme options à html2canvas comme mentionné dans docs . Voici le violon pour la même chose.

html2canvas($('#imagesave')[0], {
  scale:3
}).then(function(canvas) {
  var a = document.createElement('a');
  a.href = canvas.toDataURL("image/png");
  a.download = 'myfile.png';
  a.click();
});

vous pouvez mettre à l'échelle en utilisant l'attribut scale, qui sera mis à l'échelle horizontalement et verticalement avec autant de fois.

16
Durga