2023.11.12使用flask对图片进行黑白处理（base64编码方式传输）
由前端输入图片并预览，在后端处理图片后返回前端显示，可以作为图片处理的模板。
关键点在于对图片进行base64编码的转化。
使用Base64编码可以更方便地将图片数据嵌入到文档中或者通过JSON等文本格式进行传输。比如如下场景：
（1）内联显示：如果需要在HTML文档中直接内联显示图片，可以将图片数据以Base64编码的形式嵌入到HTML或CSS中，而无需单独发送额外的图片请求。
（2）数据传输：在某些情况下，由于限制或者需求，可能需要将图片数据作为文本传输，例如在JSON数据中一并传输图片。
（3）减少HTTP请求：将图片数据编码为Base64可以避免额外的图片请求，特别是对于小尺寸的图片而言，这种方式可能会提高页面加载的效率。
在服务器端，也可以将图片存储在特定的路径下，然后在HTTP响应中返回这个图片的URL，前端可以通过该URL进行图片的加载和展示。这种方式是最常见的图片传输方式，也是最高效的方式之一。
另外，如果需要在前端内联显示图片，也可以通过HTTP响应返回图片的二进制数据，并在前端使用Blob URL或者直接使用二进制数据来展示图片，而无需进行Base64编码。
from flask import Flask, render_template, request, jsonify
from PIL import Image
import io
import base64
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') # 转换为黑白图片
# 将处理后的图片转换为 Base64 编码
buffered = io.BytesIO() # 创建一个内存缓冲区，用于存储图像数据
bw_img.save(buffered, format='JPEG') # 将处理后的黑白图像保存到内存缓冲区中，格式为JPEG
img_str = base64.b64encode(buffered.getvalue()).decode() # 使用base64模块对内存缓冲区中的图像数据进行Base64编码，并将结果转换为字符串格式
return jsonify({'processed_image': img_str})
if __name__ == '__main__':
app.run(debug=True)
<!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>
<style>
#images img {
width:200px;
heigh:100px;
}
</style>
</head>
<body>
<h1>Image Processor</h1>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" accept="image/*" onchange="previewImage(event)">
<br>
<button type="button" onclick="processImage()">Process</button>
</form>
<h2>Preview and Processed Image</h2>
<div id="images">
<div id="previewDiv"></div>
<div id="processedDiv"></div>
</div>
<script>
function previewImage(event) {
var input = event.target;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var previewImage = document.createElement('img');
previewImage.src = e.target.result;
var previewDiv = document.getElementById('previewDiv');
previewDiv.innerHTML = '';
previewDiv.appendChild(previewImage);
};
reader.readAsDataURL(input.files[0]);
}
}
function processImage() {
var input = document.querySelector('input[type="file"]');
var file = input.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) {
// 假设img_str是后端传递的Base64编码的图片数据
var processedImage = document.createElement('img'); // 创建一个img元素
processedImage.src = 'data:image/jpeg;base64,' + response.processed_image; // 将Base64编码的图片数据赋值给img元素的src属性
var processedDiv = document.getElementById('processedDiv'); // 将img元素添加到页面中，即可显示图片
processedDiv.innerHTML = '';
processedDiv.appendChild(processedImage);
}
}
};
xhr.send(formData);
}
</script>
</body>
</html>
