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

时间： 2023-11-14 admin 维修知识

和下述文章进行对比，实现效果相同，但是使用url方式更简便。
2023.11.12使用flask对图片进行黑白处理（base64编码方式传输）
/?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 Imageapp = 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)