2023.11.13使用flask将图片进行黑白处理（url方式进行传输）

和下述文章进行对比，实现效果相同，但是使用url方式更简便。

2023.11.12使用flask对图片进行黑白处理（base64编码方式传输）
https://editor.csdn.net/md/?articleId=134370865

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Processor</title>
</head>
<body>
    <h1>Image Processor</h1>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="file" accept="image/*" onchange="previewImage(event)">
        <input type="button" value="Process" onclick="processImage()">
    </form>
    <h2>Preview Image</h2>
    <img id="preview" src="#" alt="Preview Image">

    <h2>Processed Image</h2>
    <img id="processed" src="#" alt="Processed Image">

    <script>
        function previewImage(event) {
            var input = event.target;
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById('preview').src = e.target.result;
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        function processImage() {
            var fileInput = document.querySelector('input[type="file"]');
            var file = fileInput.files[0];
            var formData = new FormData();
            formData.append('file', file);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/process', true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.processed_image) {
                        document.getElementById('processed').src = response.processed_image;
                    }
                }
            };
            xhr.send(formData);
        }
    </script>
</body>
</html>

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

app = Flask(__name__)

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

@app.route('/process', methods=['POST'])
def process():
    if 'file' not in request.files:
        return jsonify({'error': 'No file part'})

    file = request.files['file']
    img = Image.open(file)
    bw_img = img.convert('L')  # 转换为黑白图片
    bw_img.save('static/processed_image.jpg')  # 保存处理后的图片

    return jsonify({'processed_image': '/static/processed_image.jpg'})

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