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中所述。这是同一个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属性进行缩放，scale属性可以在很长的时间内水平和垂直缩放。

如何设置渲染图像的大小

1 个答案: