Ajouter du texte sur une image à l'aide de PIL

Question

J'ai une application qui charge une image et lorsque l'utilisateur clique dessus, une zone de texte apparaît pour cette image (en utilisant la fonction jquery ), où l'utilisateur peut écrire un texte sur l'image. Ce texte doit être ajouté à l'image.

Après avoir fait quelques recherches sur le sujet, je me suis dit que PIL (Python Imaging Library) peut m'aider à le faire. J'ai donc essayé quelques exemples pour voir comment cela fonctionne et j'ai réussi à écrire du texte sur une image. Mais je pense qu'il y a une certaine différence lorsque je l'essaie en utilisant Python Shell et dans un environnement web. Je veux dire que le texte de la zone de texte est très grand en px. Comment puis-je obtenir la même taille de texte que celle de la zone de texte en utilisant l'IAP ?

Le texte est multiligne. Comment puis-je le rendre multi-ligne dans l'image également, en utilisant PIL ?

Y a-t-il un meilleur moyen que d'utiliser la LIP ? Je ne suis pas tout à fait sûr qu'il s'agisse de la meilleure mise en œuvre.

html :

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

c'est l'image qui est éditée

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

le jquery pour ajouter le textarea. En outre, la zone de texte est position:absolute et de taille fixe.

Dois-je le placer à l'intérieur d'un formulaire pour pouvoir obtenir les coordonnées de la zone de texte sur l'image ? Je veux écrire du texte sur l'image lorsque l'utilisateur clique et le sauvegarder sur l'image.

Answer 1

Avec Pillow, vous pouvez également dessiner sur une image en utilisant le module ImageDraw. Vous pouvez dessiner des lignes, points, ellipses, rectangles, arcs, bitmaps, accords, pieslices, polygones, formes et textes.

from PIL import Image, ImageDraw
blank_image = Image.new('RGBA', (400, 300), 'white')
img_draw = ImageDraw.Draw(blank_image)
img_draw.rectangle((70, 50, 270, 200), outline='red', fill='blue')
img_draw.text((70, 250), 'Hello World', fill='green')
blank_image.save('drawn_image.jpg')

nous créons un objet Image avec la méthode new(). Celle-ci renvoie un objet Image sans image chargée. Nous ajoutons ensuite un rectangle et du texte à l'image avant de l'enregistrer.

Answer 2

Une chose qui n'est pas mentionnée dans les autres réponses est de vérifier la taille du texte. C'est souvent nécessaire pour s'assurer que le texte s'adapte à l'image (par exemple, raccourcir le texte s'il est trop grand) ou pour déterminer l'endroit où dessiner le texte (par exemple, texte aligné en haut au centre). Pillow/PIL offre deux méthodes pour vérifier la taille du texte, une via ImageFont et une via ImageDraw. Comme indiqué ci-dessous, la police ne gère pas les doublures multiples, alors que ImageDraw le fait.

In [28]: im = Image.new(mode='RGB',size=(240,240))                                                            
In [29]: font = ImageFont.truetype('arial')
In [30]: draw = ImageDraw.Draw(im)
In [31]: t1 = 'hello world!'
In [32]: t2 = 'hello \nworld!'
In [33]: font.getsize(t1), font.getsize(t2) # the height is the same
Out[33]: ((52, 10), (60, 10)) 
In [35]: draw.textsize(t1, font), draw.textsize(t2, font)  # handles multi-lined text
Out[35]: ((52, 10), (27, 24))

Answer 3

J'ai récemment dû mettre en œuvre la même chose. J'ai créé un paquet sur pypi qui pourrait s'avérer utile : pynter

Cette étape vous permet d'ajouter du texte à une image :

1. Télécharger une image : curl https://i.imgur.com/XQCKcC9.jpg -o ./image.jpg

2. Téléchargez une police : curl https://fonts.google.com/download?family=Roboto -o ./roboto.zip ; unzip ./roboto.zip -d ./Roboto

3. pip install pynter

   from pynter.pynter import generate_captioned font_path = './Roboto/Roboto-Regular.ttf' image_path = './image.jpg' im = generate_captioned('China lands rover on Mars'.upper(), image_path=image_path, size=(1080, 1350), font_path=font_path, filter_color=(0, 0, 0, 40)) im.show() im.convert('RGB').save('drawn_image.jpg')

Ce seront les résultats :

Answer 4

Pour ajouter du texte sur un fichier image, il suffit de copier/coller le code ci-dessous

<?php
$source = "images/cer.jpg";
$image = imagecreatefromjpeg($source);
$output = "images/certificate".rand(1,200).".jpg";
$white = imagecolorallocate($image,255,255,255);
$black = imagecolorallocate($image,7,94,94);
$font_size = 30;
$rotation = 0;
$origin_x = 250;
$origin_y = 450;
$font = __DIR__ ."/font/Roboto-Italic.ttf";
$text = "Dummy";
$text1 = imagettftext($image,$font_size,$rotation,$origin_x,$origin_y,$black,$font,$text);
     imagejpeg($image,$output,99);
?> <img src="<?php echo $output; ?>"> <a href="<?php echo $output;    ?>" download="<?php echo $output; ?>">Download Certificate</a>