Png images contain random noise pixels #2629

nitrousdigital · 2015-10-14T17:03:44Z

I am generating a small png image from a simple html file and the resulting png file contains random noise pixels in the first line of the image. All of the attached images were generated from the same exact html file using the command-line:

wkhtmltoimage.exe --transparent --javascript-delay 500 error.html error_out.png

The content of error.html file is as follows:

<html>
<head>
    <style>
        body {
            margin:0px;
            background-color:white;
        }
        .kpi-error-icon {
            margin-right: 5px;
            vertical-align: middle;
        }
        .kpi-error-grid {
            background-color: #FFE6E6;
            border-radius:10px;
            padding: 10px;
        }
        .kpi-error-grid td {
            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-size:12px;
        }
        .kpi-error-title {
            font-weight:bold;
            font-size:14px !important;
            white-space: nowrap;
            color: red;
            vertical-align : middle;
        }
        .kpi-error-message {
            font-weight:bold;
            font-size:12px;
            color: black;
        }
    </style>
</head>
<body>
    <table class='kpi-error-grid' id='layout-table' border='0' cellspacing='0' cellpadding='5' >
    <tbody>
        <tr>
            <td class='kpi-error-title' align='center'>Error!</td>
        </tr>
        <tr>
            <td class='kpi-error-message' align='center'>Failed to build metric chart set &quot;Variance_1_RawMetricData&quot;: Unable to retrieve kpi data.</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

I'm using:
wkhtmltoimage 0.12.2.4 (with patched qt)
Windows 7 Professional SP 1 64-bit

nitrousdigital · 2015-10-14T17:14:09Z

Note: This problem only occurs when generating images with a transparent background (using the --transparent option)

ryana · 2015-10-26T23:11:18Z

Same issue:

Image isn't loading, not sure why. Here is link: https://ramen-files.s3.amazonaws.com/email-images/a03fac7a-4c07-459c-94a3-6a5bb34d374e.png

wkhtmltoimage 0.12.1 (with patched qt)
OSX Yosemite

ericfirth · 2015-11-03T17:46:14Z

same issue as well
https://dl.dropboxusercontent.com/u/1610412/Daily%20Promotional%20-%20Opened%20-%20message-elements%20(6).png

ryana · 2015-11-03T18:01:46Z

Btw, this happens at 200x200, but not at 220x200. At 190x190, only the bottom ~20% of the image has noise. One of the odder bugs I've encountered. I only need PNGs, so I've moved over to a PhantomJS-based solution (https://github.com/ramen-dev/screencap) but still interested in this getting fixed for future PDF exports.

kazimzaidi · 2015-12-09T10:34:36Z

+1 happens with me. Happens when one of the images on the page has a size > 800kb.

micheal-swiggs · 2016-03-10T13:30:23Z

+1 I'm getting this error when using both the --transparent and --width flags. I've created some html for my problem: https://gist.github.com/micheal-swiggs/13aac40efb57d8a7bd0f

pjarmalavicius · 2017-11-29T11:28:43Z

What is the status of this issue? I have same issue and want to know how to solve it

Tim-Brenner · 2018-02-27T19:08:39Z

I've found a workaround for this! 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.

Tomsgu · 2018-08-23T06:12:19Z

Is this still an issue in 0.12.5?

franjaviersans · 2018-11-09T11:40:21Z

I was able to isolate the issue.

Qt images are initialized with uninitialized data, as stated in -> http://doc.qt.io/qt-5/qimage.html#QImage-1

A line with "image.fill(qRgba(0, 0, 0, 0));" should be added after the initialization of the image to ensure that some data will always be on the background. This will fix issues with images with transparent background.

Xhilbert · 2019-02-26T12:37:56Z

Thank you franjaviersans !

I have just downoaded the latest version of wkhtmlimage and the bug is still there.
I don't know how to build the wkhtm library. Could someone use your idea to fix the bug, and upload the fixed release version of wkhtml on github ?

thank you.
Xavier.

franjaviersans · 2019-03-01T00:11:48Z

Hello @Xhilbert I can give you the steps to build it, but I don't know how to upload the new version:

The source code can be changed adding "image.fill(qRgba(0, 0, 0, 0));" in the line 182 of the file imageconverter.cc, after the creation of the image.
I generated the file with the version 0.12.5 of the library.

To build the library the following steps should be used:

Install virtual machine with Ubuntu or use a native Ubuntu OS. If a virtual machine is going to be used, install VMware Workstation instead of VirtualBox, as the latter doesn't allow the use of docker on the guest OS.
Pull repository (with submodules) of the source code from https://github.com/wkhtmltopdf/wkhtmltopdf (commit cb88e4e)
Pull repository containing the packaging tool from https://github.com/wkhtmltopdf/packaging (commit 1a23e08) and install the listed programs on Ubuntu
Run the following command on the console: sudo ./build package-docker mxe-cross-win64 ../wkhtmltopdf/
All the files required to run the library can be found on the "targets" folder

I only built it for that windows versions. There is the possibility to build with other platforms, but not all of them worked for me.

Hope it helps.

Let me know if you are able to build and upload a new version, as I'm currently using my modified version, but I would like to use the official version.

Galigator · 2019-03-02T06:36:59Z

Using your explanation, I was able to compile and release (a non official) a version with the correction of this ticket : https://github.com/Galigator/wkhtmltopdf/releases

Xhilbert · 2019-03-02T08:16:38Z

Thank you very much !!!!
It works fine !!!

svenemtell · 2019-11-12T16:17:14Z

Thanks @Galigator, your release made my day!

ericmillsio · 2020-07-16T19:22:21Z

A fix for this still hasn't ended up in an official release?

flexeo · 2021-02-08T08:11:49Z

I use wkhtmltox-0.13.0-alpha-7b36694_linux-jessie-amd64 on Debian 8.

Do you have a trick to fix this problem without compile from sources?

Thanks!

ericmillsio · 2021-02-08T18:15:41Z

@flexeo #2629 (comment) I can confirm Brenner's comment works as a workaround.

petegore · 2021-11-05T11:35:38Z

I still have this issue while croping the html to a 40px square to create a png icon.

alloylab added the NeedInfo label Jun 15, 2018

Xhilbert mentioned this issue Feb 26, 2019

Png images contain random noise pixels. #4267

Closed

Seangottarun mentioned this issue Aug 20, 2020

Random noise pixels in transparent pngs when using imgkit (wkhtmltopdf) Seangottarun/GPXOverlay#3

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Png images contain random noise pixels #2629

Png images contain random noise pixels #2629

nitrousdigital commented Oct 14, 2015 •

edited by Tomsgu

nitrousdigital commented Oct 14, 2015

ryana commented Oct 26, 2015

ericfirth commented Nov 3, 2015

ryana commented Nov 3, 2015

kazimzaidi commented Dec 9, 2015

micheal-swiggs commented Mar 10, 2016

pjarmalavicius commented Nov 29, 2017 •

edited

Tim-Brenner commented Feb 27, 2018

Tomsgu commented Aug 23, 2018

franjaviersans commented Nov 9, 2018

Xhilbert commented Feb 26, 2019

franjaviersans commented Mar 1, 2019

Galigator commented Mar 2, 2019

Xhilbert commented Mar 2, 2019

svenemtell commented Nov 12, 2019 •

edited

ericmillsio commented Jul 16, 2020 •

edited

flexeo commented Feb 8, 2021

ericmillsio commented Feb 8, 2021

petegore commented Nov 5, 2021

Png images contain random noise pixels #2629

Png images contain random noise pixels #2629

Comments

nitrousdigital commented Oct 14, 2015 • edited by Tomsgu

nitrousdigital commented Oct 14, 2015

ryana commented Oct 26, 2015

ericfirth commented Nov 3, 2015

ryana commented Nov 3, 2015

kazimzaidi commented Dec 9, 2015

micheal-swiggs commented Mar 10, 2016

pjarmalavicius commented Nov 29, 2017 • edited

Tim-Brenner commented Feb 27, 2018

Tomsgu commented Aug 23, 2018

franjaviersans commented Nov 9, 2018

Xhilbert commented Feb 26, 2019

franjaviersans commented Mar 1, 2019

Galigator commented Mar 2, 2019

Xhilbert commented Mar 2, 2019

svenemtell commented Nov 12, 2019 • edited

ericmillsio commented Jul 16, 2020 • edited

flexeo commented Feb 8, 2021

ericmillsio commented Feb 8, 2021

petegore commented Nov 5, 2021

nitrousdigital commented Oct 14, 2015 •

edited by Tomsgu

pjarmalavicius commented Nov 29, 2017 •

edited

svenemtell commented Nov 12, 2019 •

edited

ericmillsio commented Jul 16, 2020 •

edited