我有一个加载图像的应用程序,当用户单击它时,会为此图像显示一个文本区域(使用jquery),用户可以在其中写一些图像。应该在图像上添加。
在对其进行了一些研究之后,我发现PIL(Python Imaging Library)可以帮助我做到这一点。因此,我尝试了几个示例以了解其工作原理,并设法在图像上写了文字。但是我认为Python Shell在Web环境中使用和尝试时会有一些区别。我的意思是textarea上的文本以px为单位很大。使用PIL作为文本区域上的文本时,如何获得相同大小的文本?
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:绝对大小和固定大小。
我应该将其放置在表单中以便在图像上获取文本区域的坐标吗?我想在用户单击时在图像上写文本并将其保存在图像上。
我认为其中提供的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。
TextArea
要添加文本换行(多行的东西),只需大致了解一行中可以包含多少个字符,然后就可以为Text编写预处理功能,该函数基本上可以找到每行中最后一个字符,将此字符之前的空格转换为换行符。