py
import os
from flask import Flask, render_template, url_for, send_from_directory, request, session, redirect from flask_avatars import Avatars
basedir = os.path.abspath(os.path.dirname(name))
app = Flask(name) app.secret_key = 'dev' app.config['AVATARS_SAVE_PATH'] = os.path.join(basedir, 'avatars')
avatars = Avatars(app)
In reality, you can use Flask-WTF/WTForms to handle file upload and form validation.
serve avatar image
@app.route('/avatars/<path:filename>') def get_avatar(filename): return send_from_directory(app.config['AVATARS_SAVE_PATH'], filename)
@app.route('/', methods=['GET', 'POST']) def upload(): if request.method == 'POST': f = request.files.get('file') raw_filename = avatars.save_avatar(f) session['raw_filename'] = raw_filename # you will need to store this filename in database in reality return redirect(url_for('crop')) return render_template('upload.html')
@app.route('/crop', methods=['GET', 'POST']) def crop(): if request.method == 'POST': x = request.form.get('x') y = request.form.get('y') w = request.form.get('w') h = request.form.get('h') filenames = avatars.crop_avatar(session['raw_filename'], x, y, w, h) url_s = url_for('get_avatar', filename=filenames[0]) url_m = url_for('get_avatar', filename=filenames[1]) url_l = url_for('get_avatar', filename=filenames[2]) return render_template('done.html', url_s=url_s, url_m=url_m, url_l=url_l) return render_template('crop.html')
upload.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flask-Avatars Demo</title> </head> <body> <h1>Step 1: Upload</h1> <form method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit"> </form> </body> </html>
crop.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flask-Avatars Demo</title> {{ avatars.jcrop_css() }} <style> #preview-box { display: block; position: absolute; top: 10px; right: -280px; padding: 6px; border: 1px rgba(0, 0, 0, .4) solid; background-color: white; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); } </style> </head> <body> <h1>Step 2: Crop</h1> {{ avatars.crop_box('get_avatar', session['raw_filename']) }} {{ avatars.preview_box('get_avatar', session['raw_filename']) }} <form method="post"> <input type="hidden" id="x" name="x"> <input type="hidden" id="y" name="y"> <input type="hidden" id="w" name="w"> <input type="hidden" id="h" name="h"> <input type="submit" value="Crop!"> </form> {{ avatars.jcrop_js() }} {{ avatars.init_jcrop() }} </body> </html>
done.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flask-Avatars Demo</title> </head> <body> <h1>Done!</h1> <p><a href="/">Back to Step 1</a></p> <p>small: <img src="{{ url_s }}"></p> <p>medium: <img src="{{ url_m }}"></p> <p>large: <img src="{{ url_l }}"></p> </body> </html>
