html2canvas bigger size of download image

Question

I've set up html2canvas so I can edit text and then download that as image and that works great, but the size is limited to the width of its container.

If I set up canvas width and height render becomes that size but it's black. What am I doing wrong?

Here is the JSfiddle with everything working but if you add width and height (currently commented), rendered pictured will get black.

JavaScript

html2canvas(document.getElementById("imagewrap"), {
  onrendered: function(canvas) {
    canvas.className = "html2canvas";
    // canvas.width = "1080";
    // canvas.height = "1920";
    document.getElementById("canvasWrapper").appendChild(canvas);
    var image = canvas.toDataURL("image/png");
    document.getElementById("downloadLink").href = image;
  },
  useCORS: true
});

score 2 · Accepted Answer · answered Jan 20 '22 at 20:06

2

After creating a new <canvas> element and setting the width and height attributes, the image is drawn on the canvas using the drawImage() method ^[1].

html2canvas(document.getElementById("imagewrap"), {
  onrendered: function(canvas) {
    var  _canvas = document.createElement("canvas");
    _canvas.setAttribute('width', 1080);
    _canvas.setAttribute('height', 1920);
    var ctx = _canvas.getContext('2d');
    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 1080, 1920);
    var dataURL = _canvas.toDataURL();  
    document.getElementById("canvasWrapper").appendChild(_canvas);
    var image = _canvas.toDataURL("image/png");
    document.getElementById("downloadLink").href = image;
  },
  useCORS: true
});

Copy the JavaScript code below without disturbing your current work on JSFiddle and click the Download button to download the image. Then review the properties and content of the downloaded image:

^{1 - Html2Canvas Resize}

answered Jan 20 '22 at 20:06

Sercan

4,739
3
17
36

Thank you for your help. This did enlarge the image, but the resolution is blown up (it's blurry). I'm gonna try and figure out if there is some resolution parameter (I think I saw it in documentation) and report back here. – DearBee Jan 20 '22 at 20:21
1

I think this issue may be the subject of a new question. – Sercan Jan 20 '22 at 20:25
1

You have to change the `scale` parameter. [Related](https://stackoverflow.com/a/50736279/15032688) – Sercan Jan 20 '22 at 20:26
Yeah, but it would be nice little complete solution for anyone in the future :) I went over 40+ examples until I paced image + editable text = downloadable image – DearBee Jan 20 '22 at 20:27
Yeah, I'm trying that now – DearBee Jan 20 '22 at 20:28
1

Neither scale or dpi seem to help. I've placed them before onrendered function and the result is the same. – DearBee Jan 20 '22 at 20:49
I tried too; It seems normal that it doesn't work. Because the original image size is 1080x1920. This may be the limit value for us. However, there is one thing that draws attention. The original image size is **223 KB** but the image size we downloaded is **2025 KB**. – Sercan Jan 20 '22 at 20:56
The `scale` parameter is a scam; used to move the image away from the `1:1` scale; in this case the image appears in higher resolution. When I apply the `dpi` parameter, the bit depth remains fixed at 32, but the `dpi` value does not appear in the properties. – Sercan Jan 20 '22 at 20:59
Yeah, I agree. At this point I'm think about copying text (as you type) into element with display none and just scale it there as much as I need. – DearBee Jan 20 '22 at 21:05
Just to confirm, cloning everything to another (bigger) div indeed worked. It doesn't feel good to do it this way, but at least it works... Thanks again for your help! – DearBee Jan 21 '22 at 12:32

Osva Guzman · Answer 2 · 2023-07-20T19:26:48.237

Maybe this will help someone having the same issue as I; Try dividing your target size by the width of the source size, and then use that value as your scale. To clarify:

{
  width: 1080,
  height: 1080,
  scale: 1
}

The code above would render a 1080x1080 image, however the actual html content would be contained to 348x348(source size) and surrounded by whitespace.

Instead I divided target/source (1080/348) and got 3.10344828. So, instead of setting the width and height I simply set the scale to 3.10344828 and the image outputted a perfect 1080x1080 image.

{
  /*no width no height set*/
  scale: 3.10344828
}

html2canvas bigger size of download image

2 Answers2