2023.11.12使用flask对图片进行黑白处理（base64编码方式传输）
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>
相关文章：
2023.11.12使用flask对图片进行黑白处理（base64编码方式传输）
2023.11.12使用flask对图片进行黑白处理（base64编码方式传输） 由前端输入图片并预览，在后端处理图片后返回前端显示，可以作为图片处理的模板。 关键点在于对图片进行base64编码的转化。 使用Base64编码可以更方便地将图片数据嵌入…...
MATLAB中Filter Designer的使用以及XILINX Coefficient(.coe)File的导出
文章目录 Filter Designer的打开滤波器参数设置生成matlab代码生成XILINX Coefficient(.COE) File实际浮点数的导出官方使用教程 Filter Designer的打开 打开Filter Designer： 方法一：命令行中输入Filter Designer，再回车打开。 方法二&…...
js 深度学习（四）
函数 var test function test1(){var a 1,b2console.log(a,b)test1()//递归 } console.log(test.name) //test1 test1() //报错匿名函数表达式 函数自变量 var test function(){->匿名函数var a 1,b2console.log(a,b)test1()//递归 }var test function(a,b){var a 1,b2…...
leetcode刷题日记:121. Best Time to Buy and Sell Stock( 买卖股票的最佳时机)
题目给了我们一组数prices，其中prices[i]表示第i天的股票价格，需要我们求出买卖股票所能获得的最大收益。 我们的第一想法就是从算出每一种买卖股票的情况然后求出里面的最大值，这样我们就能得到最大收益是多少，但是这种情况过于复…...
Mac 本地部署thinkphp8【部署环境以及下载thinkphp】
PHP的安装以及环境变量配置 1 PHP安装：在终端输入brew install php 这里是PHP下载的最新的 如果提示‘brew’找不到，自己搜索安装吧， 不是特别难 2 环境变量配置 终端输入vim ~/.bash_profile 输入export PATH"/usr/local/Cellar/php/8.…...
【汽车电子】CAN总线分析仪使用介绍（PCAN/同星CAN卡）
本篇文章以CAN卡的使用为基本线索，介绍了在汽车电子领域涉及的一些CAN卡使用流程，搭配强大的上位机可以实现诸多功能。文章并没有局限于一种CAN卡，而是针对PCAN和同星的CAN卡分别以常用CAN报文收发以及诊断控制台实现这两种方向进行了CAN卡使…...
C //例 7.13 有一个3*4的矩阵，求所有元素中的最大值。
C程序设计 （第四版） 谭浩强 例 7.13 例 7.13 有一个3*4的矩阵，求所有元素中的最大值。 IDE工具：VS2010 Note: 使用不同的IDE工具可能有部分差异。 代码块 方法：使用指针、动态分配内存 #include <stdio.h> …...
基于SSM的供电所档案管理系统
末尾获取源码 开发语言：Java Java开发工具：JDK1.8 后端框架：SSM 前端：采用JSP技术开发 数据库：MySQL5.7和Navicat管理工具结合 服务器：Tomcat8.5 开发软件：IDEA / Eclipse 是否Maven项目&#x…...
excel用RAND函数生成一个大于0小于1的随机数
插入-》函数： 选择RAND函数： 点击“继续”： 点击“确定”，就生成随机数了：...
详解IP安全：IPSec协议簇 | AH协议 | ESP协议 | IKE协议
目录 IP安全概述 IPSec协议簇 IPSec的实现方式 AH（Authentication Header，认证头） ESP（Encapsulating Security Payload，封装安全载荷） IKE（Internet Key Exchange，因特网密钥…...
mysql使用--数据库的基本操作
在MYSQL中，一些表的集合称为一个数据库。MYSQL服务器管理若干个数据库，每个数据库下都可有若干个表。 1.展示数据库 SHOW DATABASES; 2.创建数据库 如：CREATE DATABASE myname; 更智能语法，可用：CREATE DATABASE IF …...
计算机毕业设计选题推荐-个人记账理财微信小程序/安卓APP-项目实战
✨作者主页：IT毕设梦工厂✨ 个人简介：曾从事计算机专业培训教学，擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...
如何利用IP代理进行海外推广？
在当今数字化的时代，网络营销已经成为企业策略的重要组成部分。而对于进去海外市场的跨境玩家来说，海外的推广推广是重中之重。然而，在开展推广的过程中，我们常常会遇到各种挑战，如地域限制、访问速度慢等。 为了解决…...
流)
使用FFmpeg转封装为hls(m3u8)流
改造ffmpeg/doc/examples/remuxing.c，支持将输入流转封装为hls协议对应的github地址：GitHub - yagerfgcs/FFmpeg at examples/remuxing_support_hls修改点：增加设置hls头 // example:https://www.ffmpeg.org/ffmpeg-all.html#hls-2 // f…...
npm install导致的OOM解决方案
文章目录 问题记录解决方法Linux重启排查方法 如何排查Linux自动重启的原因 问题记录 我在华为云服务器配置npm开发环境的时候， SSH远程连接一直掉线，无奈提了工单，被告知是NPM install导致的OOM问题。无语了，破NPM还有这个问题呢…...
HTTP和HTTPS详解
一)什么是HTTP协议 1)HTTP协议是倾向于相遇业务层次上面的一种协议，传输层协议主要考虑的是端对端之间的一个传输过程，TCP重点进行关注的是可靠传输；咱们的HTTP/1，HTTP/2是基于TCP的，但是咱们的HTTP/3是基于UDP的&…...
设计模式之模版方法(TemplateMethod)
模版方法 钩子函数 回调函数 在父类里面有一个模版方法，在这个方法里面调用了op1，op2，op3… 在子类里面如果想要改变父类的op1和op2 只需要重写op1和op2，那么这个重写之后的方法，可以在父类里面直接调用的到 例子: J…...
为什么数据安全很重要？哪些措施保护数据安全？
数据安全很重要的原因是因为数据是现代社会的重要财产之一。很多组织和企业依赖数据来做出商业决策，管理客户关系，进行财务规划等等。如果这些数据泄露或遭到黑客攻击，那么就会影响企业的经济利益，甚至影响到个人的隐私和安全。此…...
git push 操作代码回退
git reset revert 回退回滚取消提交返回上一版本 总有一天你会遇到下面的问题. (1)改完代码匆忙提交,上线发现有问题,怎么办? 赶紧回滚. (2)改完代码测试也没有问题,但是上线发现你的修改影响了之前运行正常的代码报错,必须回滚. 这些开发中很常见的问题,所以git的取消提交…...
ESP32 Arduino引脚分配参考：您应该使用哪些 GPIO 引脚？
ESP32 芯片有 48 个引脚，具有多种功能。并非所有 ESP32 开发板中的所有引脚都暴露出来，有些引脚无法使用。 关于如何使用 ESP32 GPIO 有很多问题。您应该使用什么引脚？您应该避免在项目中使用哪些引脚？这篇文章旨在成为 ESP32 GP…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，百货中心供应链管理系统被用户普遍使用，为方…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
C++ 类基础：封装、继承、多态与多线程模板实现
前言 C 是一门强大的面向对象编程语言，而类（Class）作为其核心特性之一，是理解和使用 C 的关键。本文将深入探讨 C 类的基本特性，包括封装、继承和多态，同时讨论类中的权限控制，并展示如何使用类…...
2025 后端自学UNIAPP【项目实战：旅游项目】7、景点详情页面【完结】
1、获取景点详情的请求【my_api.js】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http(/login/getWXSessionKey, {code,avatar}); };//…...
旋量理论：刚体运动的几何描述与机器人应用
旋量理论为描述刚体在三维空间中的运动提供了强大而优雅的数学框架。与传统的欧拉角或方向余弦矩阵相比，旋量理论通过螺旋运动的概念统一了旋转和平移，在机器人学、计算机图形学和多体动力学领域具有显著优势。这种描述不仅几何直观，而且计算…...
基于Java的离散数学题库系统设计与实现：附完整源码与论文
JAVASQL离散数学题库管理系统 一、系统概述 本系统采用Java Swing开发桌面应用，结合SQL Server数据库实现离散数学题库的高效管理。系统支持题型分类（选择题、填空题、判断题等）、难度分级、知识点关联，并提供智能组卷、在线测试…...
Clickhouse统计指定表中各字段的空值、空字符串或零值比例
下面是一段Clickhouse SQL代码，用于统计指定数据库中多张表的字段空值情况。代码通过动态生成查询语句实现自动化统计，处理逻辑如下： 从系统表获取指定数据库（替换your_database）中所有表的字段元数据根据字段类型动态…...
)
GitHub 趋势日报 (2025年06月07日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 603 netbird 459 dify 440 cognee 352 omni-tools 337 note-gen 239 ragbits 237 …...