如何设置渲染图像的大小

Question

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

我做错了什么？

我的保存功能，来自我的 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. Here is the 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();
});

你可以使用缩放属性进行缩放，它会水平和垂直缩放那么多倍。

如何设置渲染图像的大小

How to Set Size of Rendered Image

html2canvas