web-dev-qa-db-ja.com

レンダリング画像のサイズを設定する方法

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

docs で述べたように、html2canvasのオプションとして幅と高さを渡す必要があります。これが 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();
});

スケール属性を使用してスケールできます。スケール属性は、その回数だけ水平および垂直にスケールします。

16
Durga