Setting width and height does not produce expected result

[rferreira98]

Setting a specific width and height so that the result is always de same and does not depend on the current viewport/device resolution. Result image is of the size asked but the child elements do not resize and instead I'm left with the elements as they are in the current viewport and a huge blank space.

Expected Behavior

Set width and height properties to 1920x1080 and get an image result as if the chosen container element was 1920x1080 (and all responsive elements would just match).

Current Behavior

Set width and height properties to 1920x1080 and get an image result as if the chosen container element was 1920x1080 but the child elements don't resize or match the container size change as they do on the actual page.

Steps To Reproduce

1. htmlToImage.toPng( element, {width:1920, height:1080});
2. download
3. image is resized, responsive child elements are not

Your Environment

• html-to-image: 1.10.8
• OS: macOS Monterey 12.4
• Browser: Chrome Version 105.0.5195.125 (Official Build) (arm64)

[vivcat[bot]]

👋 @rferreira98

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[krskrs]

We've started using this plugin today and immediately stumbled upon this bug, which makes the width and height options practically unusable.

[miccoh1994]

Currently moved from html-to-image because of the unexpected results. Using html2canvas with this fix: https://github.com/niklasvh/html2canvas/issues/2829#issuecomment-1043784608 Getting image via canvas.toDataURL('image/jpeg').

[gdeggau]

I'm facing this issue right now, really annoying :/

[MartinMorici]

Same problem here

[abombelli]

Same problem. Size setting are not respected.

[catalin-drulea]

Same problem here, still not solved.

[MartinMorici]

use html to canvas instead, didn't find a solution with html to image, it works by just using windowWidth instead of width

  html2canvas(report.current!, {
    windowWidth: 1920,
    backgroundColor: bgColor!,
  }).then((canvas) => {
    const link = document.createElement('a')
    link.download = 'Report.jpeg'
    link.href = canvas.toDataURL('image/jpeg', 1.0)
    link.click()
  })