当前位置：首页 > news >正文

2023.11.12使用flask对图片进行黑白处理（base64编码方式传输）

news 2025/11/9 4:14:06

由前端输入图片并预览，在后端处理图片后返回前端显示，可以作为图片处理的模板。
关键点在于对图片进行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>

在这里插入图片描述

2023.11.12使用flask对图片进行黑白处理（base64编码方式传输）

相关文章：

2023.11.12使用flask对图片进行黑白处理（base64编码方式传输）

MATLAB中Filter Designer的使用以及XILINX Coefficient(.coe)File的导出

js 深度学习（四）

leetcode刷题日记:121. Best Time to Buy and Sell Stock( 买卖股票的最佳时机)

Mac 本地部署thinkphp8【部署环境以及下载thinkphp】

【汽车电子】CAN总线分析仪使用介绍（PCAN/同星CAN卡）

C //例 7.13 有一个3*4的矩阵，求所有元素中的最大值。

基于SSM的供电所档案管理系统

excel用RAND函数生成一个大于0小于1的随机数

详解IP安全：IPSec协议簇 | AH协议 | ESP协议 | IKE协议

mysql使用--数据库的基本操作

计算机毕业设计选题推荐-个人记账理财微信小程序/安卓APP-项目实战

如何利用IP代理进行海外推广？

使用FFmpeg转封装为hls(m3u8)流

npm install导致的OOM解决方案

HTTP和HTTPS详解

设计模式之模版方法(TemplateMethod)

为什么数据安全很重要？哪些措施保护数据安全？

git push 操作代码回退

ESP32 Arduino引脚分配参考：您应该使用哪些 GPIO 引脚？

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

C++实现分布式网络通信框架RPC(3)--rpc调用端

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

Cesium1.95中高性能加载1500个点

Leetcode 3577. Count the Number of Computer Unlocking Permutations

家政维修平台实战20：权限设计

高危文件识别的常用算法：原理、应用与企业场景

3403. 从盒子中找出字典序最大的字符串 I

多种风格导航菜单 HTML 实现（附源码）

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计