flask实现图片上传处理

本demo实现将图片上传，利用 PIL库在网页端进行图像处理，并作结果展示

  • app.py:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
from flask import Flask, render_template, redirect, request,url_for
from PIL import  Image,ImageFilter, ImageOps
from flask_bootstrap import Bootstrap
import os
from flask_uploads import UploadSet, configure_uploads, IMAGES, patch_request_class
#from numpy import *
#import matplotlib.pyplot as plt
app = Flask(__name__)
bootstrap = Bootstrap(app)
app.config['UPLOADED_PHOTOS_DEST'] = os.getcwd()+'/static'
app.config['UPLOADED_PHOTO_ALLOW'] = IMAGES
photos = UploadSet('photos', IMAGES)
configure_uploads(app, photos)
patch_request_class(app)  # 文件大小限制，默认为16MB


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/upload", methods=['GET', 'POST'])
def upload():
    if request.method == 'POST' and 'photo' in request.files:
        filename = photos.save(request.files['photo'])
        file_url = photos.url(filename)
        return redirect(url_for("dealPics",filename=filename)) #传参
    return render_template("index.html")


@app.route("/pics/?<string:filename>")
def dealPics(filename):
    im = Image.open('static/'+filename)
    im_grey = im.convert('L').save("static/grey.jpg")
    im_blur = im.filter(ImageFilter.BLUR).save("static/blur.jpg")
    im_transpose = im.transpose(Image.FLIP_LEFT_RIGHT).save("static/transpose.jpg")
    im_film = ImageOps.invert(im).save("static/film.jpg")
    im_tobw = im.convert('L').convert('1').save("static/tobw.jpg")
    return render_template("pics.html", im=filename)
    #return render_template("test.html")



if __name__ == "__main__":
    app.run(debug=True)

其实等用户选择处理方式，再调用相应函数来处理，应该会更好

  • index.html（核心部分）:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
    * {
        margin: 0;
        padding: 0;
    }

    div.jumbotron {
        height: 100%;
        width: 100%;
        position: absolute;
    }
</style>
<div class="jumbotron">
    <div class="container" align="center">
        <h2 class="text-info" style="font-family:宋体;font-weight:bold;font-size:49px">图像处理demo</h2>
        <br>
        <div class="text-muted">PIL-FLASK</div>
        <br>
        <br>
        <form method=POST enctype=multipart/form-data action="{{ url_for('upload') }}">
            <input type="file" name="photo">
            <input type=submit onclick="alert('成功')"  value="提交">
        </form>
        
    </div>
</div>
  • pics.html（核心部分）:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="jumbotron">
    <div class="container" align="center">
        <img src="../static/{{im}}" class="img-thumbnail">
        <br>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
                灰度
            </button>

            <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button data-dismiss="modal" class="close" type="button"><span
                                    aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                            <h4 class="modal-title">图像处理-灰度</h4>
                        </div>
                        <div class="modal-body">
                            <img src="../static/grey.jpg" class="img-responsive center-block">
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                            <button class="btn btn-primary" type="button">下载</button>

0.0.1. 结果展示