Clash Royale CLAN TAG

Add Text on Image using PIL

I have an application that loads an Image and when the user clicks it, a text area appears for this Image (using jquery), where user can write some text on the Image. Which should be added on Image.

jquery

After doing some research on it, I figured that PIL (Python Imaging Library ) can help me do this. So I tried couple of examples to see how it works and I managed to write text on an image. But I think there is some difference when I try it using Python Shell and in web environment. I mean the text on the textarea is very big in px. How can I achieve the same size of text when using PIL as the one on the textarea?

PIL

Python Shell

The text is Multiline. How can i make it multiline in image also, using PIL?

PIL

Is there a better way than using PIL? I am not entirely sure, If this is the best implementation.

html:

<img src="images/test.jpg"/>


its the image being edited

var count = 0;
$('textarea').autogrow();
$('img').click(function(){
count = count + 1;
if (count > 1){
$(this).after('<textarea />');
$('textarea').focus();
}
});


the jquery to add the textarea.
Also the text area is position:absolute and fixed size.

Should i place it inside a form so i can get coordinates of textarea on image?
I want to write text on image when user clicks and save it on the image.

3 Answers
3

I think ImageFont module available in PIL should be helpful in solving text font size problem. Just check what font type and size is appropriate for you and use following function to change font values.

PIL

# font = ImageFont.truetype(<font-file>, <font-size>)
# font-file should be present in provided path.
font = ImageFont.truetype("sans-serif.ttf", 16)


So your code will look something similar to:

from PIL import Image
from PIL import ImageFont
from PIL import ImageDraw

img = Image.open("sample_in.jpg")
draw = ImageDraw.Draw(img)
# font = ImageFont.truetype(<font-file>, <font-size>)
font = ImageFont.truetype("sans-serif.ttf", 16)
# draw.text((x, y),"Sample Text",(r,g,b))
draw.text((0, 0),"Sample Text",(255,255,255),font=font)
img.save('sample-out.jpg')


You might need to put some extra effort to calculate font size. In case you want to change it based on amount of text user has provided in TextArea.

TextArea

To add text wrapping (Multiline thing) just take a rough idea of how many characters can come in one line, Then you can probably write a pre-pprocessing function for your Text, Which basically finds the character which will be last in each line and converts white space before this character to new-line.

self.font = core.getfont(file, size, index, encoding) IOError: cannot open resource

You can make a directory "fonts" in a root of your project and put your fonts (sans_serif.ttf) file there. Then you can make something like this:

fonts_path = os.path.join(os.path.dirname(os.path.dirname(__file__)), 'fonts')
font = ImageFont.truetype(os.path.join(fonts_path, 'sans_serif.ttf'), 24)


Even more minimal example (draws "Hello world!" in black and with the default font in the top-left of the image):

...
from PIL import ImageFont
...
ImageDraw.Draw(
image # Image
).text(
(0, 0), # Coordinates
'Hello world!', # Text
(0, 0, 0) # Color
)


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.