Aggiungi testo su immagine utilizzando PIL

Question

Ho un'applicazione che carica un'immagine e quando l'utente fa clic su, per questa immagine viene visualizzata un'area di testo (utilizzando jquery), in cui l'utente può scrivere del testo sull'immagine. Quale dovrebbe essere aggiunto su Image.

Dopo aver fatto qualche ricerca su di esso, ho pensato che PIL (Python Imaging Library) può aiutarmi a farlo. Così ho provato un paio di esempi per vedere come funziona e sono riuscito a scrivere del testo su un'immagine. Ma penso che ci sia qualche differenza quando provo usando Python Shell e in ambiente web. Voglio dire che il testo nella textarea è molto grande in px. Come posso ottenere la stessa dimensione del testo quando si usa PIL come quello nella textarea?

Il testo è multilinea. Come posso renderlo multilinea nell'immagine anche usando PIL?

C'è un modo migliore rispetto all'utilizzo di PIL? Non sono del tutto sicuro, se questa è la migliore implementazione.

html:

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

sua l'immagine in fase di modifica

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

jQuery per aggiungere textarea. Anche l'area di testo è la posizione: dimensione assoluta e fissa.

Devo inserirlo in un modulo in modo da poter ottenere le coordinate dell'area di testo sull'immagine? Voglio scrivere un testo sull'immagine quando l'utente fa clic e lo salva sull'immagine.

Answer 1

Penso che il modulo ImageFont disponibile in PIL dovrebbe essere utile per risolvere il problema di dimensione del carattere del testo. Basta controllare quale tipo di carattere e dimensione sono appropriati per te e usa la seguente funzione per cambiare i valori dei font.

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

Così il vostro codice sarà qualcosa di simile a:

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

Potrebbe essere necessario mettere qualche sforzo in più per calcolare la dimensione del carattere. Nel caso in cui si desideri modificarlo in base alla quantità di testo che l'utente ha fornito in TextArea.

Per aggiungere del testo (oggetto multilinea) basta dare un'idea approssimativa di quanti caratteri possono venire in una riga, quindi probabilmente puoi scrivere una funzione di pre-pprocessing per il tuo testo, che in pratica trova il carattere che sarà l'ultimo in ogni riga e converte lo spazio bianco prima di questo carattere in una nuova riga.

Answer 2

È possibile creare una cartella "caratteri" in una radice del progetto e inserire il file di caratteri (sans_serif.ttf) lì. Quindi puoi fare qualcosa del genere:

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)