Dodaj tekst na obrazie za pomocą PIL

Question

Mam aplikację, która ładuje obraz i kiedy użytkownik go kliknie, pojawi się obszar tekstowy dla tego obrazu (przy użyciu jquery), w którym użytkownik może napisać tekst na obrazie. Które należy dodać do obrazu.

Po przeprowadzeniu badań na ten temat, stwierdziłem, że PIL (Python Imaging Library) może mi w tym pomóc. Próbowałem więc kilku przykładów, aby zobaczyć, jak to działa i udało mi się napisać tekst na obrazie. Ale myślę, że jest jakaś różnica, kiedy próbuję tego używając Python Shell oraz w środowisku sieciowym. Mam na myśli, że tekst na tekście jest bardzo duży w px. Jak mogę osiągnąć ten sam rozmiar tekstu, gdy korzystam z PIL jak ten w obszarze tekstowym?

Tekst jest wielowierszowy. Jak mogę sprawić, by obraz był wieloliniowy również przy użyciu PIL?

Czy istnieje lepszy sposób niż użycie PIL? Nie jestem do końca pewien, czy jest to najlepsze wdrożenie.

html:

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

jego obraz edytowany

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

jQuery dodać textarea. Również obszar tekstowy to pozycja: bezwzględny i stały rozmiar.

Czy powinienem umieścić go w formularzu, aby uzyskać współrzędne obszaru tekstowego na obrazie? Chcę napisać tekst na obrazie, gdy użytkownik kliknie i zapisze go na obrazie.

Answer 1

Myślę, że moduł ImageFont dostępny w PIL powinien być pomocny przy rozwiązywaniu problemu z wielkością czcionki. Sprawdź, jaki typ i rozmiar czcionki jest dla Ciebie odpowiedni, i użyj poniższej funkcji do zmiany wartości czcionki.

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

Tak Twój kod będzie wyglądać coś podobnego do:

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

może trzeba umieścić kilka dodatkowych starań, aby obliczyć rozmiar czcionki. Jeśli chcesz go zmienić na podstawie ilości tekstu podanego przez użytkownika w TextArea.

Aby dodać zawijanie tekstu (rzecz wielowierszowa), po prostu zgrubnie zorientuj się, ile znaków może nadejść w jednym wierszu, to prawdopodobnie możesz napisać funkcję wstępnego przetwarzania tekstu, która w zasadzie znajduje postać, która będzie ostatnia w każdej linii i konwertuje białe znaki przed tym znakiem na nową linię.

Answer 2

Możesz utworzyć katalog "czcionek" w katalogu głównym projektu i umieścić tam plik czcionek (sans_serif.ttf). Następnie możesz zrobić coś takiego:

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)