使用Flask-Avatars在Flask專案裡設定頭像

greylihui發表於2018-07-22

這篇文章屬於“Flask常用擴充套件介紹系列”,這個系列的文章目錄索引可以在《Flask常用擴充套件介紹系列文章索引》看到。

Flask-Avatars

大多數Web程式中都會涉及到頭像的實現。不同型別的專案,對於頭像的需求不同,有些專案可以直接使用Gravatar提供的頭像服務,而有的專案則需要提供自定義頭像功能。擴充套件Flask-Avatars幾乎滿足了所有常見的頭像需求:

  • 預設頭像
  • Gravatar頭像
  • Robohash頭像
  • 社交網站頭像
  • 生成隨機圖案頭像Identicon
  • 圖片裁剪頭像

Flask-Avatars

GitHub主頁:github.com/greyli/flas…

安裝與初始化

使用pip安裝:

$ pip install flask-avatars複製程式碼

像其他擴充套件類似,你需要例項化從flask_avatars匯入的Avatars類,並傳入app例項:

from flask_avatars import Avatars

app = Flask(__name__)
avatars = Avatars(app)複製程式碼

如果你使用工廠函式建立程式例項,那麼這裡也可以不傳入程式例項app,在工廠函式中對這個avatars物件呼叫init_app()方法時再傳入app例項。

預設頭像

Flask-Avatars內建了幾個預設頭像,可以用來作為使用者註冊後的初始頭像,或是作為部落格評論者的頭像。在模板中呼叫avatars.default()即可獲取URL:

<img src="{{ avatars.default() }}">複製程式碼

你可以通過size引數來設定尺寸,預設為m,其他可選值有l和s。實際的呼叫示例如下所示:default avatar

Gravatar

在模板中呼叫avatars.gravatar()方法並傳入Email雜湊值即可獲取Gravatar(gravatar.com)的頭像URL:

<img src="{{ avatars.gravatar(email_hash) }}">複製程式碼

Email雜湊值可以通過下面的方式獲取:

import hashlib

avatar_hash = hashlib.md5(my_email.lower().encode('utf-8')).hexdigest()複製程式碼

實際的呼叫示例如下所示:gravatar

Robohash

Robohash(robohash.org)是一個生成隨機機器人頭像的服務(目前Gravatar的預設頭像中已經支援這一型別,可以通過將default引數設為robohash獲取)。在模板中呼叫avatars.robohash()並傳入隨機文字作為引數即可獲取Robohash的頭像URL:

<img src="{{ avatars.robohash(some_text) }}">複製程式碼

實際的呼叫示例如下所示:

robohash

社交網站頭像

Flask-Avatars通過Avatars.io提供了社交頭像獲取服務,目前支援Facebook、Twitter、Instagram和Gravatar。通過在模板中呼叫avatars.social_media()方法並傳入使用者名稱(username)即可獲取對應的頭像URL,通過size引數可以設定尺寸,可選值為small、medium和large:

<img src="{{ avatars.social_media(username) }}">複製程式碼

通過platform引數可以設定平臺,預設為twitter,可選值為twitter、facebook、instagram和gravatar:

<img src="{{ avatars.social_media(username, platform='facebook') }}">複製程式碼

實際的呼叫示例如下所示:

avatars.io

生成隨機圖案頭像Identicon

Gravatar服務可能會有不穩定的情況,這種情況下,你可以在本地為使用者生成頭像(identicon),下面是一個簡單的示例:

app.config['AVATARS_SAVE_PATH '] = 'the/path/to/save/avatar'

avatar = Identicon()
filenames = avatar.generate(text=‘一串唯一字元’)複製程式碼

avatar.generate()會根據傳入的隨機字元建立三個尺寸(可以通過配置變數AVATARS_SIZE_TUPLE自定義)的頭像,儲存到指定的位置,並返回三個頭像檔名。你可以將這個檔名儲存到資料庫中,並建立一個檢視函式來提供頭像檔案:

from flask import send_form_directory, current_app

@app.route('/avatars/<path:filename>')
def get_avatar(filename):
    return send_from_directory(current_app.config['AVATARS_SAVE_PATH'], filename)複製程式碼

實際生成的頭像示例如下所示:identicon

裁剪頭像

Flask-Avatars基於Jcrop提供了頭像裁剪功能,具體步驟可以參考文件中的相關部分。下面是示例程式中的裁剪頁面:裁剪

裁剪後的結果:裁剪完成

配置

Flask-Avatars支援的配置列表如下所示:

配置 預設值 說明
AVATARS_GRAVATAR_DEFAULT identicon Gravatar預設頭像型別
AVATARS_SAVE_PATH None 頭像儲存路徑
AVATARS_SIZE_TUPLE (30, 60, 150) 頭像尺寸三元素元組,格式為 (small, medium, large),用於生成identicon頭像和裁剪頭像
AVATARS_IDENTICON_COLS 7 Identicon頭像一行的色塊數量
AVATARS_IDENTICON_ROWS 7 Identicon頭像一列的色塊數量
AVATARS_IDENTICON_BG None Identicaon頭像的背景顏色,傳入RGB元組,比如(125, 125, 125)。預設使用隨機顏色
AVATARS_CROP_BASE_WIDTH 500 裁剪圖片的顯示寬度
AVATARS_CROP_INIT_POS (0, 0) 裁剪框起始位置,兩元素元組(x, y),預設為左上角
AVATARS_CROP_INIT_SIZE None 裁剪框的尺寸,預設為尺寸元組中設定的l尺寸大小,即AVATARS_SIZE_TUPLE[0]
AVATARS_CROP_MIN_SIZE None 裁剪框的限制最小尺寸,預設無限制
AVATARS_CROP_PREVIEW_SIZE None 預覽視窗的尺寸,預設為尺寸元組中設定的m尺寸大小,即AVATARS_SIZE_TUPLE[1]
AVATARS_SERVE_LOCAL False 是否從本地載入Jcrop資源,預設從CDN載入

示例程式

Flask-Avatars的Git倉庫中包含三個例項程式,也就是文中的截圖對應的程式:

  • examples/basic —— 基本示例
  • examples/identicon —— Identicon示例
  • examples/crop —— 裁剪示例

你可以通過下面的方式來執行例項程式:

$ git clone https://github.com/greyli/flask-avatars.git
$ cd flask-avatars/examples
$ pip install flask flask-avatars
$ cd basic  # 切換到identicon和crop目錄可以執行對應的示例程式
$ flask run複製程式碼

相關連結


相關文章