wkhtmltoimage rendering colored noise for transparent PNGs

Question

I'm trying to render a HTML page as a PNG with transparency enabled.

This is the command that generates the images:

/usr/local/bin/wkhtmltoimage-amd64 --transparent --crop-h 300 --crop-w 210 temporary.html image.png

I have also tried enabling the format parameter.

/usr/local/bin/wkhtmltoimage-amd64 --transparent --format png --crop-h 300 --crop-w 210 temporary.html image.png

But the images are always showing colored noise like this. I am using the latest binaries from http://wkhtmltopdf.org/downloads.html.

Answer 1

We get the same issue.

Without the crop values it seems to work.

We are under:

• Windows
• Xammp
• wkhtmltoimage 0.12.4 (with patched qt)

Our possible solution is to make the browser of the wkhtmltoimage width height 300px and width 210px:

/usr/local/bin/wkhtmltoimage-amd64 --transparent --height 300 --width 210 temporary.html image.png 

Answer 2

I was facing the same issue, with the wrapper for Python IMGKIT, each of these changes made the problem less frequent until I didn't got the problem any longer:

• Remove transparency from HTML, any background-color: transparent.
• Remove crop-w, crop-h, width, height
• Set zoom to 4. (I was using --zoom: 2 to make it higher quality)

These steps made the error disappear, now it works but you get a giant image since you can't crop or set the size. To fix that I used Pillow in Python:

imgkit.from_file(new_html_path, output_image_path, options=options)

padding = 50
img = Image.open(output_image_path)
bbox = img.getbbox()
bbox = (
    max(0, bbox[0] - padding),
    max(0, bbox[1] - padding),
    min(img.width, bbox[2] + padding),
    min(img.height, bbox[3] + padding)
)

cropped_img = img.crop(bbox)
cropped_img.save(output_image_path)

Hope this helps someone :)

Answer 3

Have you tried to increase the size of the image? I had such problem too with 100px images, but when I made width 500px I got no noise.

(Yes, I know that this is not a complete solution but perhaps it will help someone)

Answer 4

The solution I figured out through trial-and-error is to set the width to something rather large. In my case, I set it to 8000. It apparently only uses the width as a guideline, so this theoretically should be a safe solution.