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

Je pense ImageFont disponible dans PIL devrait être utile pour résoudre le problème de la taille de la police du texte. Vérifiez simplement le type et la taille de la police qui vous convient et utilisez la fonction suivante pour modifier les valeurs de la police.

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

Votre code ressemblera donc à quelque chose de semblable :

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')

Vous devrez peut-être faire un effort supplémentaire pour calculer la taille de la police. Si vous souhaitez la modifier en fonction de la quantité de texte fournie par l'utilisateur dans le champ TextArea .

Pour ajouter l'habillage de texte (chose multi-ligne) il suffit de prendre une idée approximative de combien de caractères peuvent venir dans une ligne, alors vous pouvez probablement écrire une fonction de prétraitement pour votre texte, qui trouve essentiellement le caractère qui sera le dernier dans chaque ligne et convertit l'espace blanc avant ce caractère en nouvelle ligne.

Answer 2

Exemple encore plus minimal (dessine "Hello world !" en noir et avec la police par défaut en haut à gauche de l'image) :

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

Answer 3

Vous pouvez créer un répertoire "fonts" dans une racine de votre projet et y placer votre fichier de polices (sans_serif.ttf). Ensuite, vous pouvez faire quelque chose comme ceci :

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)

Answer 4

Tout d'abord, vous devez télécharger un type de police... par exemple : https://www.wfonts.com/font/microsoft-sans-serif .

Après cela, utilisez ce code pour dessiner le texte :

from PIL import Image
from PIL import ImageFont
from PIL import ImageDraw 
img = Image.open("filename.jpg")
draw = ImageDraw.Draw(img)
font = ImageFont.truetype(r'filepath\..\sans-serif.ttf', 16)
draw.text((0, 0),"Draw This Text",(0,0,0),font=font) # this will draw text with Blackcolor and 16 size

img.save('sample-out.jpg')

Answer 5

Première installation de l'oreiller

pip install pillow

Exemple

from PIL import Image, ImageDraw, ImageFont

image = Image.open('Focal.png')
width, height = image.size 

draw = ImageDraw.Draw(image)

text = 'https://devnote.in'
textwidth, textheight = draw.textsize(text)

margin = 10
x = width - textwidth - margin
y = height - textheight - margin

draw.text((x, y), text)

image.save('devnote.png')

# optional parameters like optimize and quality
image.save('optimized.png', optimize=True, quality=50)