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

leigh_chen

已于 2023-11-13 10:48:50 修改

阅读量597

点赞数 1

分类专栏：开发日记文章标签： flask python 后端

于 2023-11-13 10:21:37 首次发布

本文链接：https://blog.csdn.net/leigh_chen/article/details/134370865

版权

开发日记专栏收录该内容

70 篇文章 1 订阅

订阅专栏

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>

在这里插入图片描述

leigh_chen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
2023.11.12使用flask对图片进行黑白处理（base64编码方式传输）

由前端输入图片并预览，在后端处理图片后返回前端显示，可以作为图片处理的模板。关键点在于对图片进行base64编码的转化。使用Base64编码可以更方便地将图片数据嵌入到文档中或者通过JSON等文本格式进行传输。
复制链接

扫一扫