如何设置渲染图像的大小

Question

我对如何指定 html2canvas 生成的图像的大小感到困惑。 例如，我希望能够让我的 DIV 保持 400px x 400px，但渲染图像为 1200px x 1200px。 我看过文档，但我误解了如何应用它。我试过添加

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 属性进行缩放，它会水平和垂直缩放那么多倍。

Answer 2

只是有一个类似的问题，我只是希望渲染图像与我的目标 div 大小完全相同。唯一有用的是使用 SeanMC 和 Sruit A.Suk 设置宽度、高度和比例的所有 3 个建议。

html2canvas(myContainerDiv, {
    width: 1024,
    height: 1024,
    scale: 1
}).then(function (canvas) {
    var data = canvas.toDataURL('image/png');
    outputImage.src = data;
});