How to Set Size of Rendered Image

Question

I'm confused with how to designate the size of the image that html2canvas generates. For example, I'd like to be able to have my DIV remain 400px x 400px but have the rendered image be 1200px x 1200px. I've looked at the documentation but I'm misunderstanding how to apply it. I've tried adding a.width: 1200; a.height: 1200; without luck.

What am I doing wrong?

My save function, from my 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;
}

Durga · Accepted Answer · 2018-02-01T16:45:42.180

50

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

You need to pass width and height as options to html2canvas as mentioned in docs. Here is the fiddle for the same.

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

you can scale using scale attribute, which will scale horizontally and vertically with that much times.

edited Feb 01 '18 at 16:45

answered Feb 01 '18 at 14:23

Durga

15,263
2
28
52

This looks promising but how do I get the content of the div to scale with the new dimensions? In this example, shouldn't the red DIV be 1200 x 1200? – anonymoose Feb 01 '18 at 15:07
2

You want to scale the whole div? – Durga Feb 01 '18 at 15:09
I think I misunderstood something when I posted the question. You're on the right track, but yes; what I was trying to say was that I'd like the div to remain 400 x 400 (displayed to the user) but I'd like it scaled when generated as an image; this is mainly an attempt to get things clearer. – anonymoose Feb 01 '18 at 15:11
1

Marking this as solved as you answered what I asked! I will re-ask the question more correctly. – anonymoose Feb 01 '18 at 16:43
3

@codeforever if you want both with same multiplier you can use `scale`. check update – Durga Feb 01 '18 at 16:46
2

This is exactly what I was going for. Thank you. – anonymoose Feb 01 '18 at 16:58
1

even after I set my image to the correct width/height, I had to manually set the scale to 1, it seemed to default to 1.5 or something – SeanMC Jan 19 '20 at 03:02
1

this fix my issue, i need to include both width, height, and scale – Sruit A.Suk Dec 06 '21 at 00:03

score 1 · Answer 2 · answered Apr 15 '23 at 03:35

Just had a similar issue where I simply wanted the rendered image to be exactly the same size as my target div. The only thing that worked was to use SeanMC's and Sruit A.Suk's suggestions of setting all 3 of the width, height AND scale.

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

How to Set Size of Rendered Image

2 Answers2