Flask 上传图片并灰度显示

Posted 霜序0.2℃

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flask 上传图片并灰度显示相关的知识,希望对你有一定的参考价值。

Flask 上传图片并灰度显示

接到了一个小需求:使用flask写上传图片并灰度显示

刚好没写过python的后端,来试一试

代码

使用了layui的组件

app.js

import logging
import os

from flask import Flask, render_template, request
from PIL import Image

app = Flask(__name__)

# 映射到index.html
@app.route('/')
def index():
    return render_template('index.html')

# 指定post请求
@app.route('/upload', methods=['post'])
def upload():
    # 文件不存在就退出
    if ('file' not in request.files):
        print('no found file')
        return
    img = request.files['file']

    path = os.path.abspath(os.path.dirname(__file__)) + "/static/photo"
    
	# 日志打印
    app.logger.info("path: " + path)
	# 创建文件夹
    if os.path.exists(path) == False:
        os.makedirs(path)
	
    file_path = path + "/" + img.filename
    app.logger.info('file_path: ' + file_path)
	# 保存图片
    img.save(file_path)

    img2 = Image.open(file_path)
	# 灰度变化
    Img = img2.convert('L')
    Img.save(file_path)

    fname = '/static/photo/' + img.filename

    app.logger.info(fname)

    return render_template('view.html', fpath=fname)

if __name__ == '__main__':
    app.run()

# todo 可以增加的功能,指定上传类型,生成唯一图片标识符防止图片名重复

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/jquery-3.6.0.js"></script>
    <style>
        body 
            text-align: center;
            padding: 20px;
        

        form 
            width: 500px;
            margin: auto;
        

    </style>
</head>
<body>

<form method="post" action="/upload" enctype="multipart/form-data" class="layui-form">
    <div class="layui-form-item wu-example" id="uploader" style="display: inline-block;">
        <div class="layui-input-block" >
            <input type="file" name="file"  class="layui-btn" value="添加文件"/><button class="layui-btn" lay-submit lay-filter="*">上传</button>
        </div>
    </div>
</form>

<script>

</script>

</body>
</html>

view.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片显示</title>
    <style>
        body 
            text-align: center;
            padding: 20px;
        
    </style>
</head>
<body>
    <img src=" fpath " style="height: 300px;width: 500px" alt="pic">
</body>
</html>

部署

使用了gunicorn部署flask

在阿里云上安装pyinstaller,进行打包,然后安装gunicorn(有很多依赖组件)

将文件上传到云服务器

安装完成后输入

gunicorn  -w 2 -b :8080 app:app

这里我踩坑了,理论上gunicorn -w 2 -b 127.0.0.1:8080 app:app也是可以的,但是我那个版本好像不行,然后后面那个app:app,前面那个是你运行的文件名,后面那个是你Flask的对象,就像我app.py(前一个app)中的app = Flask(__name__)

然后正常访问即可

参考:

gunicorn文档

Flask文档

以上是关于Flask 上传图片并灰度显示的主要内容,如果未能解决你的问题,请参考以下文章

使用WPF将图片转变为灰度并加上水印并保存为文件

让一个灰度矩阵显示为图片python

将视频转换为单张图片(灰度)【MATLAB】

matlab怎么读取一幅图像,并转换为灰度图像

matlab怎么读取一幅图像,并转换为灰度图像

flask-上传图片