write antialiased text with custom font on transparent image

Question

so, as the topic says, I want to write some text on an transparent image. Or, to be more specific, I want to write on multiple specific positions different text. The point is, I want to use a custom font (coolvetica) and (and there is my problem) I want it to be anti-aliased. unfortunately, PIL does not support font-anti-aliasing, as you might already know, but also see here: PIL example image. So as you see, PIL has not only an issue with the coordinates, but also does not really support font-anti-aliasing and adds some irritating black-ish border to the text. It is not very usable for me. So after some searching, I found Python Wand. The output is a lot better, but the antialiasing leads not to the result I want: Wand example image. The curves are not as smooth as I want and there are some weird "pimples" like the dot at the end of the "r". My code to use wand is this:

with Drawing() as draw:
    with wandimage(filename="Skispringen_Score.png") as img:
        draw.font_family = 'coolvetica.ttf'
        draw.text_antialias = True
        draw.fill_color = (Color("rgba(255, 255, 255, 255)"))
        for postionName, scorePosition in scoreContent.items():
            if isinstance(currentScoreText[postionName], int) and currentScoreText[postionName] > 9:
                center = 2
            else:
                center = 0

            draw.font_size = fontsize[scorePosition["size"]]
            draw.text(scorePosition["x"] - center, scorePosition["y"], str(currentScoreText[postionName]))
            draw(img)
        img.save(filename='wand-image.png')

And here is an example of what the text should actually look like: PHP example image. This image was generated with php and the text looks as smooth as I want to. I also tried to use cairo, but the documentation is really not that good (especially examples are rare) and I just don't even know how to write any text with it nor how to set an custom font.

The actual output image has an resolution of 1280x720 and is - besides of the text - completely transparent, the image is just an overlay for an videostream.

Do you have any idea how to get a nice looking text onto the image with python?

score 1 · Answer 1 · answered Feb 16 '19 at 23:55

You could try pycairo. Here are some code examples https://github.com/pygobject/pycairo/tree/master/examples

The reference docs for cairo are for C.

If you want even better results then you could render the image at 4 times the size and downsample it to the desired size.

You can also try some filters like a gaussian blur.

For pixel perfect images you will have to use the same rendering engine that your php function is using.

write antialiased text with custom font on transparent image

1 Answers1