图片剪裁之Jcrop插件

最新推荐文章于 2024-03-09 15:36:48 发布

张愿斌

最新推荐文章于 2024-03-09 15:36:48 发布

阅读量306

点赞数

分类专栏： flask 文章标签： flask-avatars crop

本文链接：https://blog.csdn.net/szyyzt/article/details/102463174

版权

flask 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用户上传头像等操作都会用到图片的裁剪。Jcrop是一个很好的图片剪裁插件。在flask中，扩展flask-avatars也集成了Jcrop的功能。

一、jcrop

Jcrop基于jquery，所以引入前要先引入jquery。用起来非常简单：

<html>
<head>
<link  rel="stylesheet" href='C:\Users\Administrator\Desktop\Jcrop-0.9.12\css\jquery.Jcrop.css'>
<script src="C:\Users\Administrator\Desktop\Jcrop-0.9.12\js\jquery.min.js"></script>>
<script src="C:\Users\Administrator\Desktop\Jcrop-0.9.12\js\jquery.Jcrop.js"></script>>
</head>
<body>
<img id="element_id" src="C:\Users\Administrator\Desktop\pictures\2.jpg">
<script type="text/javascript">var jcropApi;
$('#element_id').Jcrop()</script>
</body>
</html>

这样就完成了裁剪数据（起始位置，宽和高）的选定，将数据传给后台即可完成裁剪。

二、flask-avatars

flask-avatars集成了jcrop的功能。

#app.py
from flask import Flask,render_template,url_for,send_from_directory,request,session,redirect
from flask_avatars import Avatars
app=Flask(__name__)
avatars=Avatars(app)
app.secret_key='zhang'
app.config['AVATARS_SAVE_PATH']='C:/Users/Administrator/Desktop/avatars'

@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  
        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>

实现功能主要是利用 avatars.crop_box获取位置坐标，利用avatars.crop_avatar进行裁剪。

张愿斌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片剪裁之Jcrop插件

用户上传头像等操作都会用到图片的裁剪。Jcrop是一个很好的图片剪裁插件。在flask中，扩展flask-avatars也集成了Jcrop的功能。一、jcropJcrop基于jquery，所以引入前要先引入jquery。用起来非常简单：<html><head><link rel="stylesheet" href='C:\Users\Administrat...
复制链接

扫一扫