html2canvas - 如何设置渲染图像的大小

Question

我对如何指定 html2canvas 生成的图像的大小感到困惑。 例如，我希望能够让我的 DIV 保持 400px x 400px，但渲染图像为 1200px x 1200px。我查看过 the documentation但我误解了如何应用它。我尝试添加 a.width: 1200; a.height: 1200;没有运气。

我做错了什么？

我的保存功能，来 self 的 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;
}

Answer 1

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();
});

您需要将宽度和高度作为选项传递给 html2canvas，如 docs 中所述。 。这是fiddle对于同样的。

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();
});

您可以使用scale属性进行缩放，该属性将水平和垂直缩放相应的次数。