0

I'm trying to create a table (width = 190px, height = 128px) that is filled with some text and save that as an image. I managed to do that both with matplotlib and by simply generating a HTML table however with both methods I run to the same problem the text gets "compressed" and is blurry. Blurry letters

I would like to generate a pic like this 32x16 pic hand drawn in paint. What would be the best way to achieve this. At the moment I am using python to generate the HTML table and then I am saving it using the html2image library. The table needs to be generated programmatically though. Furthermore I tried to sample only some of the pixels above a threshold but then the text is even worse. The image can be saved as .pgn, .jpg or .bmp Any advice is appreciated! The code below is how I am generating and saving the table ATM.

def printTable(data):
    htmlTable = ""
    htmlTable += '<table>'
    htmlTable += '<tr>'
    htmlTable += '<td>%s</td>'% "NAME"
    htmlTable += '<td>%s</td>'% "LAST NAME"
    htmlTable += '<td>%s</td>'% "PASSWORD"
    htmlTable += '<td>%s</td>'% "USERNAME" 
    htmlTable+= '</tr>'
    
    for element in data.itertuples():
        htmlTable += '<tr>'
        htmlTable += ('<td>%s</td>'% element.NAME)
        htmlTable += ('<td>%s</td>'% element.LAST NAME)
        htmlTable += ('<td>%s</td>'% element.PASSWORD) 
        htmlTable += ('<td>%s</td>'% element.USERNAME) 
        htmlTable += '</tr>'
    htmlTable += '</table>'
    return htmlTable

tableString = printTable(df1)

print(tableString)

from html2image import Html2Image
hti = Html2Image(size=(190, 128))
#hti = Html2Image()

html = tableString
css = "\
      @font-face {\
          font-family: myFirstFont;\
          src: url(Dogica Pixel Regular.ttf);\
      }\
        table, th, td{ \
        border:1px solid red; \
        border-collapse: collapse; \
        background-color: black; \
        color:red \
      }\
      table{ \
        widht: 190px;\
        font-size: 8px;\
        font-family:myFirstFont\
      }\
      "

hti.screenshot(html_str=html, css_str=css, save_as='htmlTable.png')

Original image not scaled Scaled image enter image description here

P.S. I really hope hand drawing every pixel on a canvas isn't the only solution xd.

arduinOMEGALUL
  • 21
  • 1
  • Please could you add some code which demonstrates the problem - I am not at all clear how you are generating the image in the first place. – A Haworth Apr 28 '22 at 12:52
  • I edited the answer, this is how I'm doing it with HTML. The results with matplot lib are worse so I would rather not post them to keep the post short, but i basically did everything from this post https://stackoverflow.com/questions/35634238/how-to-save-a-pandas-dataframe-table-as-a-png – arduinOMEGALUL Apr 28 '22 at 13:09
  • 1
    It looks like the screen shot generated by `html2image` is rescaled to match your desired output size? Is that right? Could you post an actual 'htmlTable.png' image generated? It also looks like you're using a font that is not really suitable for small print sizes. It's "pixellated", but that's just a look. Use one of the fonts specifically designed for use at small scales. – Cris Luengo Apr 28 '22 at 14:58
  • 1
    IMHO at that kind of scale you have to use a font directly at the right size, fonts are optimized for small sizes, and scaling involves interpolating pixels which means blur, which is always very visible on text. – xenoid Apr 28 '22 at 17:30
  • I thing @xenoid is right, even when the image is not scaled the letters are blurry. I posted both the non scaled and the scaled picture in the original question. I thought the font I used is good for small sizes . Any recommendations on fonts and generating the pic in general? – arduinOMEGALUL Apr 29 '22 at 05:14
  • 1
    Seriously, at 6px high, nothing is truly readable. At that size (or even at 8px) you need the old pixel-true bitmap fonts that were used with VGA screens (or in the BIOS of PCs). Also, red on black is a bad choice for readability, green would be better. So in that order, 1) find a font and 2) find a way to used it programmatically. – xenoid Apr 29 '22 at 06:56
  • Thanks for the response I'll look into pixel-true bitmap fonts. – arduinOMEGALUL Apr 29 '22 at 08:43

0 Answers0