search

tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.23k stars 1.68k forks source link

Fixed width and height causes bugs with some screen resolutions #293

Closed arnaudambro closed 5 years ago

arnaudambro commented 5 years ago

Use case

Well that's a problem I can't reproduce here as I don't have Windows 10 installed on my computer, but one of my client showed me a demo of a malfunction of the lib: when you set the Scale parameter (as in the attached picture) to a value above 100%, it seems that the capture made by dom-to-image output a wrongly scaled image. image

For instance, let's say you should have the following output original

you end up with this output image

or something equivalent (I just made up those two pictures). Maybe people on Windows can try this in a fiddle ? https://jsfiddle.net/tsayen/ojb1b31r/2/

Library version

2.6.0

Browsers

It is not a problem of browser but of OS: windows where the Scale setting exists.

arnaudambro commented 5 years ago

It is actually not a problem from dom-to-image, but a problem with my config: I chose to fix the width and height properties, because I needed to handle the overflow: hidden of my captured div and opted to @mcdemarco in #50 solution. Finally, I removed the fixed height and width and followed @SkoricIT still in #50 solution, setting overflow: hidden to a wrapper and captured the wrapper