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 base64app = 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') # 将处理后的黑白图像保存到内存缓冲区中，格式为JPEGimg_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>
