vgalin
Generated image dimensions differ from defined one
I am generating an image using the following
generated_files = hti.screenshot(url=html_file, save_as=screenshot_filename, size=((IMG_WIDTH,IMG_HEIGHT)))
IMG_WIDTH is set to 1080
IMG_HEIGHT is set to 1920
When I open the html_file in browser, setting size to the above, all is displayed fine
But the generated image does not match this
Also the dimensions of the generated image are double of what I defined, they are 2160x3840.
The visble green bar at the bottom is the body's background color from css in the html file
body {
background-color: green;
width: 100vw;
min-height: 100vh;
}
So something is truncating the actual content of the div containing the background.
I also tried setting the image as background for the body
body {
/*background-color: green;*/
background-image: url("../template/wallpaper_ausblick_1080x1920.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100vw;
min-height: 100vh;
}
But even then the green bar remains. It appears something is "reserving" some space at the bottom and prevents the background image being displayed in there.
Same issue here, seems related to the chrome/chromium screenshot command since it also happens when i take a screenshot from the command line
Hi guys, i'm encountering the same issue. It is so frustrating :( Here is a small script to reproduce:
from html2image import Html2Image
html = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debug Template</title>
</head>
<body>
<div style="background-color: white; overflow: auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra, metus nec fringilla vestibulum, turpis urna congue magna, sit amet accumsan enim mauris a magna. Aenean ultricies gravida orci eget ornare. Morbi placerat dui arcu, id fermentum eros bibendum sed. Vestibulum erat nunc, aliquam eget nibh non, sagittis posuere mi. Aliquam orci velit, interdum vitae risus id, laoreet scelerisque tortor. Suspendisse ornare massa nisi, in ultrices felis bibendum lobortis. Fusce ex magna, molestie vel posuere ut, finibus quis purus. Fusce vel eros auctor odio egestas blandit at at nisi. Nam libero nunc, tincidunt id posuere non, bibendum vitae libero. Vivamus blandit arcu et tincidunt sodales. Donec tincidunt augue in dolor porta tristique.
Cras et convallis nisi. Vivamus sit amet purus molestie, efficitur justo nec, tempor erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam porttitor scelerisque risus sed mollis. Aliquam vulputate nunc felis, eget convallis mauris varius eget. Aenean pretium tincidunt diam. Nulla scelerisque condimentum dictum. Aenean quis auctor massa.
Ut nec arcu eros. Nulla convallis laoreet metus et cursus. Vivamus commodo vel velit molestie dignissim. Nulla id magna id ex faucibus varius. In vehicula venenatis nisl, nec pretium sapien fermentum id. Proin laoreet velit lorem, vitae sollicitudin elit fringilla eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lobortis commodo dapibus. Mauris ornare facilisis interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
In sodales non dui at faucibus. Ut eu lacus mauris. Curabitur placerat eget nisl in pulvinar. Nullam tincidunt risus in justo laoreet, tincidunt blandit velit aliquam. Integer non est nulla. Proin consequat congue tortor, sit amet tincidunt magna gravida ut. Pellentesque in pharetra velit. Suspendisse ac risus ut purus ultricies luctus semper sit amet nisi.
Quisque bibendum est tortor, consectetur gravida quam rutrum in. Ut dui diam, interdum consectetur convallis a, varius at neque. Donec vitae accumsan mauris. Nunc in tempor ligula. Nullam in sodales nibh. Curabitur sem dolor, tincidunt sit amet sapien vel, bibendum fermentum enim. In efficitur mi vel nisl interdum pharetra. Nulla cursus sagittis dignissim. Etiam aliquam odio a nisi dignissim dapibus.
Mauris a diam id magna ultricies hendrerit vitae quis elit. Nam tincidunt pretium lacus, vitae ultrices nisl lobortis quis. Proin dapibus urna ante, non elementum augue fringilla vitae. Sed eu lacus in tortor posuere dictum et eget quam. Curabitur bibendum metus aliquet lacus pellentesque, ut lobortis ex consectetur. Nam convallis suscipit nunc. Morbi cursus est ut ex consequat venenatis.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed risus augue, convallis ornare ornare id, varius eu nisi. Mauris ac varius dui. Vivamus et placerat ipsum, vulputate elementum diam. Proin aliquet sapien vel hendrerit lobortis. Nam eget sagittis metus. Donec ut hendrerit dolor. Cras consequat ante velit, id accumsan urna lacinia non. Nullam enim nulla, tempor eget ligula ac, lobortis viverra sapien. Integer blandit ullamcorper elit eu eleifend. Vivamus commodo, mi at maximus auctor, nibh elit auctor nisl, non lacinia velit sapien vel nulla. Sed quam leo, lobortis id finibus sit amet, varius pretium nulla. Vestibulum vel turpis iaculis, sollicitudin quam vel, pretium lectus. Nullam tincidunt, mi sit amet fringilla iaculis, eros eros vehicula nisi, ut feugiat est mauris quis orci. Duis at fermentum diam. Fusce mollis justo ut ullamcorper lacinia.
Integer eu ultrices dui, eget sagittis orci. Nunc id tristique purus. Vivamus suscipit sapien non nisi varius, in sagittis justo ultricies. Nullam porttitor nunc sit amet lacus aliquam facilisis. Suspendisse quis dolor in erat porttitor vehicula quis sit amet erat. Vestibulum tincidunt ornare neque, ut venenatis odio rutrum ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In nec fermentum est. Vestibulum porta quis ex in semper. Nullam eget malesuada augue, nec commodo ante. Nam arcu risus, laoreet non ultrices at, consectetur in turpis. Ut justo est, gravida eu velit vitae, ultrices vehicula dui. Integer a urna neque. Curabitur at sapien quis elit tincidunt dignissim nec vel velit. Aliquam lobortis mattis justo, eget mollis neque facilisis lacinia. Vestibulum facilisis eros erat, quis dictum nisi sagittis ut.
Sed molestie pretium quam, eu finibus dui finibus et. Sed quis turpis magna. Cras pretium luctus felis, eget dictum justo posuere et. Cras eu mi nec nunc imperdiet feugiat eu vitae lorem. Curabitur ullamcorper tortor eu ex vulputate tempus. Sed quis quam a purus commodo dignissim sed vel dolor. Nullam at eleifend felis. Mauris laoreet efficitur volutpat. Integer interdum nibh eu nisl blandit, et dapibus libero iaculis. Proin ac molestie tellus, in lobortis est.
Curabitur pellentesque risus felis, eu efficitur mauris consequat et. Cras quis fermentum diam, eget condimentum felis. Maecenas et ante at justo auctor laoreet ac consequat nibh. Duis vestibulum velit in imperdiet tempus. Quisque sem ex, egestas vitae volutpat at, gravida sit amet est. Morbi tempus odio eget justo posuere, at tristique leo commodo. Morbi nec ex dapibus, tincidunt elit vel, pretium risus. Mauris ultricies diam nec ligula posuere vehicula. Donec scelerisque eros id nunc egestas, et venenatis arcu varius.
</div>
</body>
</html>
"""
hti = Html2Image()
hti.browser.use_new_headless = True
_ = hti.screenshot(html_str=html, save_as='img.png', size=(800, 480))
I know, that it may not help everyone. But what I did now was to change my implementation and generate an HTML which then converts into an image, I instead generate an image right away..
Hey @preske87 can you share a minimal reproduce example ? I'm not really sure what you mean by
I know, that it may not help everyone. But what I did now was to change my implementation and generate an HTML which then converts into an image, I instead generate an image right away..
It would help me a lot !
Thanks by advance !
Wanted to pile on and say I'm facing the same issue as well! - Please let us all know if anyone knows how to fix it.
After testing this again today, I'm now able to replicate this issue (anymore?), could you tell me if the issue is still present? Using @VBA-N7 's code snippet for instance.
Hi @vgalin I just runned my reproducing script and here is the result with html2image v2.0.6
Since i dont really remember what i did to find out this was a bug, i runned the same script with v2.0.5 and there is no difference
I'm having a similar issue, screenshotting a url seems to have empty space where a scroll bar/status bar might be.
Running:
html_2_image = Html2Image()
html_2_image.screenshot(
save_as='output.png',
size=(1080, 1080),
url='https://www.amazon.com',
)
Using:
Chrome Version 136.0.7103.114 (Official Build) (64-bit) html2image 2.0.6 Windows 11
Generates:
It seems there might be an open Chromium issue: https://issues.chromium.org/issues/405165895
@vgalin here is an response for the open Chromium issue. From what i understand it is done on purpose: Status: Won't Fix (Intended Behavior) From the attached zip:
me:~/Downloads/chromium-screenshots$ file 109/* 109/20250306232006.jpg: PNG image data, 800 x 480, 8-bit/color RGBA, non-interlaced 109/20250306234007.jpg: PNG image data, 800 x 480, 8-bit/color RGBA, non-interlaced 109/20250308002006.jpg: PNG image data, 800 x 480, 8-bit/color RGBA, non-interlaced me:~/Downloads/chromium-screenshots$ file 130/* 130/20250320195014.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 800x480, components 3 130/chromium.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1600x960, components 3 130/cnn.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1600x960, components 3 130/cnn_updated.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1600x960, components 3 130/localhost.png: PNG image data, 1600 x 960, 8-bit/color RGB, non-interlaced It appears that for 109/* you used the old headless mode which uses --window-size=800,480 command line switch to set the browser window size. The --headless switch default value has been changed from old to new in m128, so in 130/* the screen shots were created using the new headless mode that picked up the retina scale factor from your Mac and added some chrome around the content. A good write up about the differences between the old and new headless modes can be found here.
Old headless mode was removed from Chrome binary at m132, so if you still want to run the old headless (now known as Chrome Headless Shell) you can download it as a stand alone binary from here.
Note that there is a new --screen-info command line switch that makes headless screen configuration much more predictable, you can read more about it here. For example, the following command line:
--screen-info={1600x1200} --window-size=800x600 ... will give you a headless screen large enough to fully contain the window of the specified size.
The --screen-size switch is available in Headless Chrome m135 on Linux, m136 on Windows and m138 on Macs. Headless Shell (aka old headless) supports --screen-size switch since m133.
Any fix regarding html2image in the future?
@edyyy19 Can you provide the a proof of the fix ?
No i cant, i just shared my thoughts about a possible fix
@vgalin Are you gonna add the --screen-info flag? Is this project discontinued?
@edyyy19 You seem to be a bit rude. You are throwing a random, untested fix and now you are asking the owner of this project to test it for you. In open source, we usually provide at least a proof of the potential fix. Even better, you can fork the project and publish a pull request with the fix.
Could you please stop flooding this issue to facilitate its tracking?
@edyyy19 You seem to be a bit rude. You are throwing a random, untested fix and now you are asking the owner of this project to test it for you. In open source, we usually provide at least a proof of the potential fix. Even better, you can fork the project and publish a pull request with the fix.
Could you please stop flooding this issue to facilitate its tracking?
I have only asked a simple question. Second i have provided the fix that Chromium responded with in the opened issue. I dont understand why are you that offended
@edyyy19 you have the ability to change the browser flags through a documented feature : https://github.com/vgalin/html2image?tab=readme-ov-file#change-browser-flags
I'd rather not hardcode this (undocumented) flag into this package for now, as mitigating temporary Chromium regressions on our side can be a never-ending endeavor.
For anyone encountering this issue, you have different possibilities:
- Wait for a fix on Chromium side, or a fix on html2image side when relevant
- Find a workaround that works for you and your use-case (whether cropping the generated image, using a custom flag, etc.)
- Use a stable and "pinned" Chrome/Chromium version that works with your use case
Please consider the last point: this package is quite stable when used with a pinned version of Chromium. Most of the commits in this repository are related to Chromium changes or addition of new features. If Chromium is unable to generate screenshots tomorrow due to a regression, no fix on html2image's side will change that.
@edyyy19 you have the ability to change the browser flags through a documented feature : https://github.com/vgalin/html2image?tab=readme-ov-file#change-browser-flags
I'd rather not hardcode this (undocumented) flag into this package for now, as mitigating temporary Chromium regressions on our side can be a never-ending endeavor.
For anyone encountering this issue, you have different possibilities:
- Wait for a fix on Chromium side, or a fix on html2image side when relevant
- Find a workaround that works for you and your use-case (whether cropping the generated image, using a custom flag, etc.)
- Use a stable and "pinned" Chrome/Chromium version that works with your use case
Please consider the last point: this package is quite stable when used with a pinned version of Chromium. Most of the commits in this repository are related to Chromium changes or addition of new features. If Chromium is unable to generate screenshots tomorrow due to a regression, no fix on html2image's side will change that.
Regarding a possible fix from the Chromium side, this wont happen (you can see in the previously opened chromium issue: https://issues.chromium.org/issues/405165895) beacuse they closed this issue with a status of: Won't fix (Intended behavior). A possible way that the problem could be solved they said that it can be the "--screen-info={1600x1200}" but i tried using it and it wont work on html2image.
In addition to images getting extra space on the bottom, for me (Chrome 138.0.7204.184) images that are too small (somewhere around 404x720) and up getting content cropped, which is worse, since you cannot simply crop the image yourself to get rid of the extra space.
As far as --screen-info, I believe there's a misunderstanding. The comment on the chromium issue mentions the flag in regards to "Chrome Headless Shell." Using Chome Headless Shell totally fixed the issue for me, without even needing to set --screen-info. So another workaround is to download the chrome headless shell, set one of the supported environment variables to point to the chrome headless shell executable, and enable environment variable usage. Obviously not an ideal solution, but it works for my purposes for now.
