使用PIL在图像上添加文本

Question

我有一个加载图像的应用程序，当用户单击它时，会为此图像显示一个文本区域（使用jquery），用户可以在其中写一些图像。应该在图像上添加。

在对其进行了一些研究之后，我发现PIL（Python Imaging Library）可以帮助我做到这一点。因此，我尝试了几个示例以了解其工作原理，并设法在图像上写了文字。但是我认为Python Shell在Web环境中使用和尝试时会有一些区别。我的意思是textarea上的文本以px为单位很大。使用PIL作为文本区域上的文本时，如何获得相同大小的文本？

文本是多行。如何使用使其在图像中成为多行PIL？

有没有比使用PIL更好的方法？我不完全确定，如果这是最好的实现。

的HTML：

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

其图像正在编辑

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

jQuery添加文本区域。文本区域也是position：绝对大小和固定大小。

我应该将其放置在表单中以便在图像上获取文本区域的坐标吗？我想在用户单击时在图像上写文本并将其保存在图像上。

Answer 1

我认为其中提供的ImageFont模块PIL应有助于解决文本字体大小问题。只需检查哪种字体类型和大小适合你，然后使用以下功能更改字体值即可。

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

因此，你的代码将类似于以下内容：

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

你可能需要花费一些额外的精力来计算字体大小。如果要根据用户在中提供的文本量进行更改TextArea。

要添加文本换行（多行的东西），只需大致了解一行中可以包含多少个字符，然后就可以为Text编写预处理功能，该函数基本上可以找到每行中最后一个字符，将此字符之前的空格转换为换行符。