<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flask-Avatars &#8211; 李辉 / Grey Li</title>
	<atom:link href="https://greyli.com/tag/flask-avatars/feed/" rel="self" type="application/rss+xml" />
	<link>https://greyli.com</link>
	<description>一个编程和写作爱好者的在线记事本</description>
	<lastBuildDate>Thu, 06 Nov 2025 11:36:11 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.9.26</generator>

<image>
	<url>https://greyli.com/wp-content/uploads/2025/03/avatar-500-compressed-144x144.jpg</url>
	<title>Flask-Avatars &#8211; 李辉 / Grey Li</title>
	<link>https://greyli.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>使用Flask-Avatars在Flask项目中设置头像</title>
		<link>https://greyli.com/flask-avatars/</link>
		<comments>https://greyli.com/flask-avatars/#comments</comments>
		<pubDate>Sun, 22 Jul 2018 02:58:29 +0000</pubDate>
		<dc:creator><![CDATA[李辉]]></dc:creator>
				<category><![CDATA[计算机与编程]]></category>
		<category><![CDATA[Flask]]></category>
		<category><![CDATA[Flask-Avatars]]></category>
		<category><![CDATA[Flask扩展]]></category>

		<guid isPermaLink="false">http://greyli.com/?p=1802</guid>
		<description><![CDATA[Flask-Avatars 大多数Web程序中都会涉及到头像的实现。不同类型的项目，对于头像的需求不同，有些项 [&#8230;]]]></description>
				<content:encoded><![CDATA[<h2>Flask-Avatars</h2>
<p>大多数Web程序中都会涉及到头像的实现。不同类型的项目，对于头像的需求不同，有些项目可以直接使用Gravatar提供的头像服务，而有的项目则需要提供自定义头像设置。扩展Flask-Avatars几乎满足了所有常见的头像需求：</p>
<ul>
<li>默认头像</li>
<li>Gravatar头像</li>
<li>Robohash头像</li>
<li>社交网站头像</li>
<li>生成随机图案头像Identicon</li>
<li>图片裁剪头像</li>
</ul>
<p><a href="http://greyli.com/wp-content/uploads/2018/07/Flask-Avatars.png"><img class="alignleft size-full wp-image-1803" src="http://greyli.com/wp-content/uploads/2018/07/Flask-Avatars.png" alt="Flask-Avatars" width="974" height="459" srcset="https://greyli.com/wp-content/uploads/2018/07/Flask-Avatars.png 974w, https://greyli.com/wp-content/uploads/2018/07/Flask-Avatars-150x71.png 150w, https://greyli.com/wp-content/uploads/2018/07/Flask-Avatars-300x141.png 300w, https://greyli.com/wp-content/uploads/2018/07/Flask-Avatars-624x294.png 624w" sizes="(max-width: 974px) 100vw, 974px" /></a></p>
<p>GitHub主页：<a href="https://github.com/greyli/flask-avatars">https://github.com/greyli/flask-avatars</a></p>
<h2>安装与初始化</h2>
<p>使用pip安装：</p>
<pre class="">$ pip install flask-avatars</pre>
<p>像其他扩展类似，你需要实例化从flask_avatars导入的Avatars类，并传入app实例：</p>
<pre class="">from flask_avatars import Avatars

app = Flask(__name__)
avatars = Avatars(app)</pre>
<p><em>如果你使用工厂函数创建程序实例，那么这里也可以不传入程序实例app，在工厂函数中对这个avatars对象调用init_app()方法时再传入app实例。</em></p>
<h2>默认头像</h2>
<p>Flask-Avatars内置了几个默认头像，可以用来作为用户注册后的初始头像，或是作为博客评论者的头像。在模板中调用avatars.default()即可获取URL：</p>
<pre class="">&lt;img src="{{ avatars.default() }}"&gt;</pre>
<p>你可以通过size参数来设置尺寸，默认为m，其他可选值有l和s。实际的调用示例如下所示：<a href="http://greyli.com/wp-content/uploads/2018/07/default.png"><img class="alignleft size-full wp-image-1808" src="http://greyli.com/wp-content/uploads/2018/07/default.png" alt="default avatar" width="770" height="617" srcset="https://greyli.com/wp-content/uploads/2018/07/default.png 770w, https://greyli.com/wp-content/uploads/2018/07/default-150x120.png 150w, https://greyli.com/wp-content/uploads/2018/07/default-300x240.png 300w, https://greyli.com/wp-content/uploads/2018/07/default-624x500.png 624w" sizes="(max-width: 770px) 100vw, 770px" /></a></p>
<p>&nbsp;</p>
<h2>Gravatar</h2>
<p>在模板中调用avatars.gravatar()方法并传入Email散列值即可获取Gravatar（<a href="http://gravatar.com">gravatar.com</a>）的头像URL：</p>
<pre class="">&lt;img src="{{ avatars.gravatar(email_hash) }}"&gt;</pre>
<p>Email散列值可以通过下面的方式获取：</p>
<pre class="">import hashlib

avatar_hash = hashlib.md5(my_email.lower().encode('utf-8')).hexdigest()</pre>
<p>实际的调用示例如下所示：<a href="http://greyli.com/wp-content/uploads/2018/07/gravatar.png"><img class="alignleft size-full wp-image-1809" src="http://greyli.com/wp-content/uploads/2018/07/gravatar.png" alt="gravatar" width="836" height="508" srcset="https://greyli.com/wp-content/uploads/2018/07/gravatar.png 836w, https://greyli.com/wp-content/uploads/2018/07/gravatar-150x91.png 150w, https://greyli.com/wp-content/uploads/2018/07/gravatar-300x182.png 300w, https://greyli.com/wp-content/uploads/2018/07/gravatar-624x379.png 624w" sizes="(max-width: 836px) 100vw, 836px" /></a></p>
<h2>Robohash</h2>
<p>Robohash（<a href="http://robohash.org">robohash.org</a>）是一个生成随机机器人头像的服务（目前Gravatar的默认头像中已经支持这一类型，可以通过将default参数设为robohash获取）。在模板中调用avatars.robohash()并传入随机文本作为参数即可获取Robohash的头像URL：</p>
<pre class="">&lt;img src="{{ avatars.robohash(some_text) }}"&gt;</pre>
<p>实际的调用示例如下所示：</p>
<p><a href="http://greyli.com/wp-content/uploads/2018/07/robohash.png"><img class="alignleft size-full wp-image-1804" src="http://greyli.com/wp-content/uploads/2018/07/robohash.png" alt="robohash" width="754" height="401" srcset="https://greyli.com/wp-content/uploads/2018/07/robohash.png 754w, https://greyli.com/wp-content/uploads/2018/07/robohash-150x80.png 150w, https://greyli.com/wp-content/uploads/2018/07/robohash-300x160.png 300w, https://greyli.com/wp-content/uploads/2018/07/robohash-624x332.png 624w" sizes="(max-width: 754px) 100vw, 754px" /></a></p>
<h2>社交网站头像</h2>
<p>Flask-Avatars通过<a href="http://avatars.io">Avatars.io</a>提供了社交头像获取服务，目前支持Facebook、Twitter、Instagram和Gravatar。通过在模板中调用avatars.social_media()方法并传入用户名（username）即可获取对应的头像URL，通过size参数可以设置尺寸，可选值为small、medium和large：</p>
<pre class="">&lt;img src="{{ avatars.social_media(username) }}"&gt;</pre>
<p>通过platform参数可以设置平台，默认为twitter，可选值为twitter、facebook、instagram和gravatar：</p>
<pre class="">&lt;img src="{{ avatars.social_media(username, platform='facebook') }}"&gt;</pre>
<p>实际的调用示例如下所示：</p>
<p><a href="http://greyli.com/wp-content/uploads/2018/07/avatars.io_.png"><img class="alignleft size-full wp-image-1805" src="http://greyli.com/wp-content/uploads/2018/07/avatars.io_.png" alt="avatars.io" width="835" height="566" srcset="https://greyli.com/wp-content/uploads/2018/07/avatars.io_.png 835w, https://greyli.com/wp-content/uploads/2018/07/avatars.io_-150x102.png 150w, https://greyli.com/wp-content/uploads/2018/07/avatars.io_-300x203.png 300w, https://greyli.com/wp-content/uploads/2018/07/avatars.io_-624x423.png 624w" sizes="(max-width: 835px) 100vw, 835px" /></a></p>
<h2>生成随机图案头像Identicon</h2>
<p>Gravatar服务可能会有不稳定的情况，这种情况下，你可以在本地为用户生成头像（identicon），下面是一个简单的示例：</p>
<pre class="">app.config['AVATARS_SAVE_PATH '] = 'the/path/to/save/avatar'

avatar = Identicon()
filenames = avatar.generate(text=‘一串唯一字符’)</pre>
<p>avatar.generate()会根据传入的随机字符创建三个尺寸（可以通过配置变量AVATARS_SIZE_TUPLE自定义）的头像，保存到指定的位置，并返回三个头像文件名。你可以将这个文件名保存到数据库中，并创建一个视图函数来提供头像文件：</p>
<pre class="">from flask import send_form_directory, current_app

@app.route('/avatars/&lt;path:filename&gt;')
def get_avatar(filename):
    return send_from_directory(current_app.config['AVATARS_SAVE_PATH'], filename)</pre>
<p>实际生成的头像示例如下所示：<a href="http://greyli.com/wp-content/uploads/2018/07/identicon.png"><img class="alignleft wp-image-1810 size-full" src="http://greyli.com/wp-content/uploads/2018/07/identicon.png" alt="identicon" width="726" height="589" srcset="https://greyli.com/wp-content/uploads/2018/07/identicon.png 726w, https://greyli.com/wp-content/uploads/2018/07/identicon-150x122.png 150w, https://greyli.com/wp-content/uploads/2018/07/identicon-300x243.png 300w, https://greyli.com/wp-content/uploads/2018/07/identicon-624x506.png 624w" sizes="(max-width: 726px) 100vw, 726px" /></a></p>
<h2>裁剪头像</h2>
<p>Flask-Avatars基于Jcrop提供了头像裁剪功能，具体步骤可以参考文档中的<a href="https://github.com/greyli/flask-avatars#avatar-crop">相关部分</a>。下面是示例程序中的裁剪页面：<a href="http://greyli.com/wp-content/uploads/2018/07/crop.png"><img class="alignleft size-full wp-image-1806" src="http://greyli.com/wp-content/uploads/2018/07/crop.png" alt="裁剪" width="847" height="704" srcset="https://greyli.com/wp-content/uploads/2018/07/crop.png 847w, https://greyli.com/wp-content/uploads/2018/07/crop-150x125.png 150w, https://greyli.com/wp-content/uploads/2018/07/crop-300x249.png 300w, https://greyli.com/wp-content/uploads/2018/07/crop-624x519.png 624w" sizes="(max-width: 847px) 100vw, 847px" /></a></p>
<p>&nbsp;</p>
<p>裁剪后的结果：<a href="http://greyli.com/wp-content/uploads/2018/07/cropped.png"><img class="alignleft size-full wp-image-1807" src="http://greyli.com/wp-content/uploads/2018/07/cropped.png" alt="裁剪完成" width="847" height="704" srcset="https://greyli.com/wp-content/uploads/2018/07/cropped.png 847w, https://greyli.com/wp-content/uploads/2018/07/cropped-150x125.png 150w, https://greyli.com/wp-content/uploads/2018/07/cropped-300x249.png 300w, https://greyli.com/wp-content/uploads/2018/07/cropped-624x519.png 624w" sizes="(max-width: 847px) 100vw, 847px" /></a></p>
<h2>配置</h2>
<p>Flask-Avatars支持的配置列表如下所示：</p>
<table style="width: 682px;">
<thead>
<tr>
<th style="width: 205px;">配置</th>
<th style="width: 129px;">默认值</th>
<th style="width: 348px;">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 205px;">AVATARS_GRAVATAR_DEFAULT</td>
<td style="width: 129px;">identicon</td>
<td style="width: 348px;">Gravatar默认头像类型</td>
</tr>
<tr>
<td style="width: 205px;">AVATARS_SAVE_PATH</td>
<td style="width: 129px;"><code>None</code></td>
<td style="width: 348px;">头像保存路径</td>
</tr>
<tr>
<td style="width: 205px;">AVATARS_SIZE_TUPLE</td>
<td style="width: 129px;"><code>(30, 60, 150)</code></td>
<td style="width: 348px;">头像尺寸三元素元组，格式为 <code>(small, medium, large)</code>，用于生成identicon头像和裁剪头像</td>
</tr>
<tr>
<td style="width: 205px;">AVATARS_IDENTICON_COLS</td>
<td style="width: 129px;">7</td>
<td style="width: 348px;">Identicon头像一行的色块数量</td>
</tr>
<tr>
<td style="width: 205px;">AVATARS_IDENTICON_ROWS</td>
<td style="width: 129px;">7</td>
<td style="width: 348px;">Identicon头像一列的色块数量</td>
</tr>
<tr>
<td style="width: 205px;">AVATARS_IDENTICON_BG</td>
<td style="width: 129px;"><code>None</code></td>
<td style="width: 348px;">Identicaon头像的背景颜色，传入RGB元组，比如<code>(125, 125, 125)</code>。默认使用随机颜色</td>
</tr>
<tr>
<td style="width: 205px;">AVATARS_CROP_BASE_WIDTH</td>
<td style="width: 129px;">500</td>
<td style="width: 348px;">裁剪图片的显示宽度</td>
</tr>
<tr>
<td style="width: 205px;">AVATARS_CROP_INIT_POS</td>
<td style="width: 129px;">(0, 0)</td>
<td style="width: 348px;">裁剪框起始位置，两元素元组(x, y)，默认为左上角</td>
</tr>
<tr>
<td style="width: 205px;">AVATARS_CROP_INIT_SIZE</td>
<td style="width: 129px;">None</td>
<td style="width: 348px;"> 裁剪框的尺寸，默认为尺寸元组中设置的l尺寸大小，即<code>AVATARS_SIZE_TUPLE[0]</code></td>
</tr>
<tr>
<td style="width: 205px;">AVATARS_CROP_MIN_SIZE</td>
<td style="width: 129px;">None</td>
<td style="width: 348px;">裁剪框的限制最小尺寸，默认无限制</td>
</tr>
<tr>
<td style="width: 205px;">AVATARS_CROP_PREVIEW_SIZE</td>
<td style="width: 129px;">None</td>
<td style="width: 348px;">预览窗口的尺寸，默认为尺寸元组中设置的m尺寸大小，即<code>AVATARS_SIZE_TUPLE[1]</code></td>
</tr>
<tr>
<td style="width: 205px;">AVATARS_SERVE_LOCAL</td>
<td style="width: 129px;">False</td>
<td style="width: 348px;">是否从本地加载Jcrop资源，默认从CDN加载</td>
</tr>
</tbody>
</table>
<h2>示例程序</h2>
<p>Flask-Avatars的Git仓库中包含三个实例程序，也就是文中的截图对应的程序：</p>
<ul>
<li>examples/basic —— 基本示例</li>
<li>examples/identicon —— Identicon示例</li>
<li>examples/crop —— 裁剪示例</li>
</ul>
<p>你可以通过下面的方式来运行实例程序：</p>
<pre class="">$ git clone https://github.com/greyli/flask-avatars.git
$ cd flask-avatars/examples
$ pip install flask flask-avatars
$ cd basic  # 切换到identicon和crop目录可以运行对应的示例程序
$ flask run</pre>
<p>这篇文章属于“Flask常用扩展介绍系列”，这个系列的文章目录索引可以在<a href="http://greyli.com/flask-extensions/">《Flask常用扩展介绍系列文章索引》</a>看到。</p>
<h2>相关链接</h2>
<ul>
<li>GitHub主页：<a href="https://github.com/greyli/flask-avatars">https://github.com/greyli/flask-avatars</a></li>
<li>Flask常用扩展介绍系列文章索引：<a href="http://greyli.com/flask-extensions/">http://greyli.com/flask-extensions/</a></li>
<li>Gravatar头像API：<a href="https://en.gravatar.com/site/implement/images/">https://en.gravatar.com/site/implement/images/</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>https://greyli.com/flask-avatars/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
