使用Flask上传图片,使用cv2进行处理,并且展示到前端

1 文件夹路径

2 前端代码

将文件保存为upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask上传图片演示</title>
</head>
<body>
    <h1>上传图片</h1>
    <form action="" enctype='multipart/form-data' method='POST'>
        <input type="file" name="file"/>
        <br>
        <input type="submit" value="上传" class="button-new" />
    </form>
    <img src={{o_img_path}} width="500" />
    <img src={{p_img_path}} width="500" />
</body>
</html>

3 后端

from flask import Flask, render_template, request
import os

app = Flask(__name__)
import datetime
import random
import numpy as np
import cv2  # 对图像进行处理
from PIL import Image  # 对图像进行处理


@app.route('/', methods=['POST', 'GET'])  # 添加路由
def upload():
    if request.method == 'POST':
        # 1 生成一个随机的文件名:唯一
        nowTime = datetime.datetime.now().strftime("%Y%m%d%H%M%S")
        randomNum = random.randint(0, 100)
        if randomNum <= 10:
            randomNum = str(0) + str(randomNum)
        uniqueNum = str(nowTime) + str(randomNum)

        # 2 获取图像
        f = request.files['file']  # 获取文件
        basepath = os.path.dirname(__file__) # 基础路径
        suffix = f.filename.split(".")[1]  # 后缀名1.jpg ->jpg

        # 3 保存原图像
        o_img_path = basepath + "/static/images/" + uniqueNum + "_o" + "." + suffix  # 原图像
        f.save(o_img_path)

        # 4 处理图像 yolov5 处理
        img = Image.open(f.stream)
        img = cv2.cvtColor(np.asarray(img), cv2.COLOR_RGB2BGR)
        gray2 = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # 灰度转换
        p_img_path = basepath + "/static/images/" + uniqueNum + "_p" + "." + suffix  # 处理后
        cv2.imencode("." + suffix, gray2)[1].tofile(p_img_path)

        return render_template('upload.html',
                               o_img_path="/static/images/" + uniqueNum + "_o" + "." + suffix,
                               p_img_path="/static/images/" + uniqueNum + "_p" + "." + suffix)
    return render_template('upload.html')


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8987, debug=True)

4 效果

在这里插入图片描述

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
好的,以下是python后端代码使用了Pillow库进行图片处理: ```python from flask import Flask, request, jsonify from PIL import Image app = Flask(__name__) @app.route('/upload', methods=['POST']) def upload(): if 'file' not in request.files: return jsonify({'error': 'No file uploaded'}) file = request.files['file'] if file.filename == '': return jsonify({'error': 'Empty filename'}) img = Image.open(file) img = img.resize((img.width // 2, img.height // 2)) img_byte_arr = io.BytesIO() img.save(img_byte_arr, format='PNG') img_byte_arr = img_byte_arr.getvalue() return jsonify({'image': base64.b64encode(img_byte_arr).decode('utf-8')}) if __name__ == '__main__': app.run() ``` 以下是前端HTML代码使用了jQuery和Bootstrap框架 ```html <!DOCTYPE html> <html> <head> <title>Image uploader</title> <!-- 引入Bootstrap和jQuery --> <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="container"> <!-- 上传表单 --> <h2>Upload your image</h2> <form id="upload-form" action="/upload" method="POST" enctype="multipart/form-data"> <div class="form-group"> <label for="file">Choose a file:</label> <input type="file" name="file" id="file" accept="image/*"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <hr> <!-- 展示处理后的图片 --> <h2>Processed image</h2> <div id="result"></div> </div> <!-- 异步请求处理后端返回的图片数据并展示 --> <script type="text/javascript"> $(function() { $('#upload-form').submit(function(e) { e.preventDefault(); var form = $('#upload-form')[0]; var formData = new FormData(form); $.ajax({ url: '/upload', type: 'POST', processData: false, contentType: false, data: formData, success: function(response) { var image = $('<img>').attr({ src: 'data:image/png;base64,' + response.image, class: 'img-responsive' }); $('#result').empty().append(image); }, error: function(err) { alert('Error: ' + JSON.stringify(err)); } }); }); }); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王小葱鸭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值