0

I have locally an .html file and I need to render it to no background image. what I do now:

import imgkit
imgkit.from_file('test.html', 'out.png')
replace_white_pixels_to_transparent("out.png") # my function that's doing what it name says :)

output before cleaning the white pixels looks like: output

And after replacing the white pixels with transperent: enter image description here

So I do get a no background image, and when upscaling the qulity and zoom in the webkit options the result is much better.

the problem is that even if the image quality is crazy high the white pixels cleaning process will leave some close to white pixels on the edges of the elements and it will delete necessary white pixels (eg. the inner of the shapes supposed to be white, or white backgroung image etc).

My question basically is how to render the html straight to no background image? instead of rendering the elements on white background and then remove it.

musicamante
  • 41,230
  • 6
  • 33
  • 58
Idan Rotbart
  • 93
  • 1
  • 5
  • Render for what? Image manipulation? Display? Dynamic viewing? Why the pyqt tag? Have you considered to just override the background of the html? – musicamante Aug 09 '22 at 09:21
  • @musicamante I just need an image of those html objects (images, texts, etc) with no background. like taking a screenshot of a page and change the white background color to transparent. webkit is working on qt and the solution may come from using qt so I added the tag. what do you mean by override background of the html? anyway thanks for your comment – Idan Rotbart Aug 09 '22 at 09:35
  • Tags are related to a specific aspect of the question, not to the assumption that what they refer to *may* work, as with that reasoning you could add dozens of other tags. Have you tried the `--no-background` option of imgkit? With background override I mean to set a different background color on the html file. Besides, are you completely sure that the html does *not* use a background color already? – musicamante Aug 09 '22 at 10:06
  • the html is pretty simple with no background color specified. the webkit rendering adds the white background probably. --no-background option isnt working for imgkit, its a pdfkit option. – Idan Rotbart Aug 09 '22 at 10:14
  • If it doesn't work as expected is a different story: imgkit is the python wrapper around wkhtmltoimage, which [***does*** have that option](https://wkhtmltopdf.org/usage/wkhtmltopdf.txt). The default white background is a convention for all web pages since the first days of browsers. – musicamante Aug 09 '22 at 10:42
  • I saw this link, but this reffers to wkhtmltopdf and not wkhtmltimage. Firstly I thought like you that imgkit has this option. I posted yesterday a question about it and then realized that --no-background is a webpdf option only probably: https://stackoverflow.com/questions/73274419/python-does-not-recognize-no-background-option-in-imgkit – Idan Rotbart Aug 09 '22 at 10:54
  • AFAIK they should work in the same way (they use the same core, the only difference is the output). What if you *explicitly* set the background color of the HTML to transparent? Btw, if you can use QWebEngine, you can set the background color of QWebEnginePage and then render it, the only problem is that it doesn't directly provide rendering on images, and you need to pass through a widget; it could be done "off-screen" using a QGraphicsScene, but it's not that immediate. – musicamante Aug 09 '22 at 12:58
  • I tried to set the background to transparent and it didnt work too. – Idan Rotbart Aug 09 '22 at 13:14

1 Answers1

1

this works pretty nicely:

import imgkit
kitoptions = {
    "transparent": "",
}

imgkit.from_file('test.html', 'out.png', options=kitoptions)
Idan Rotbart
  • 93
  • 1
  • 5
  • This doesn't seem to work with `output_path=False` functionality. I need to keep the output transparent background in variable to work with, instead of saving to file, but the background is white by default in the latter case. – Rocco Fortuna Mar 18 '23 at 21:06