python - 使用 PIL 在图像上添加文本

Question

我有一个加载图像的应用程序，当用户单击它时，该图像会出现一个文本区域(使用 jquery)，用户可以在其中在图像上写一些文本。应该在图片上添加。

在做了一些研究之后，我认为 PIL (Python Imaging Library ) 可以帮助我做到这一点。所以我尝试了几个例子来看看它是如何工作的，我设法在图像上写了文字。但是我认为当我使用 Python Shell 和在 web 环境中尝试它时会有一些不同。我的意思是 textarea 上的文本在 px 中非常大。使用 PIL 时如何实现与 textarea 上相同大小的文本？

文本是多行的。如何使用 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:absolute和固定大小。

我应该把它放在一个表单中，这样我就可以在图像上获取 textarea 的坐标了吗？ 我想在用户点击时在图像上写文字并将其保存在图像上。

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 中提供的文本量来更改它。

要添加文本换行(多行)，只需大致了解一行可以包含多少个字符，然后您可以为您的文本编写一个预处理函数，它基本上可以找到最后一个字符每行并将此字符之前的空格转换为换行符。