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

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

news 2026/2/10 6:57:25

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对图片进行黑白处理&#xff08;base64编码方式传输&#xff09; 由前端输入图片并预览&#xff0c;在后端处理图片后返回前端显示&#xff0c;可以作为图片处理的模板。 关键点在于对图片进行base64编码的转化。 使用Base64编码可以更方便地将图片数据嵌入…...

编程日记 2023/11/14 19:51:19

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

文章目录 Filter Designer的打开滤波器参数设置生成matlab代码生成XILINX Coefficient(.COE) File实际浮点数的导出官方使用教程 Filter Designer的打开 打开Filter Designer&#xff1a; 方法一&#xff1a;命令行中输入Filter Designer&#xff0c;再回车打开。 方法二&…...

编程日记 2023/11/14 19:50:17

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…...

编程日记 2023/11/14 19:49:16

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

题目给了我们一组数prices&#xff0c;其中prices[i]表示第i天的股票价格&#xff0c;需要我们求出买卖股票所能获得的最大收益。 我们的第一想法就是从算出每一种买卖股票的情况然后求出里面的最大值&#xff0c;这样我们就能得到最大收益是多少&#xff0c;但是这种情况过于复…...

编程日记 2023/11/14 19:48:14

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

PHP的安装以及环境变量配置 1 PHP安装&#xff1a;在终端输入brew install php 这里是PHP下载的最新的 如果提示‘brew’找不到&#xff0c;自己搜索安装吧&#xff0c; 不是特别难 2 环境变量配置 终端输入vim ~/.bash_profile 输入export PATH"/usr/local/Cellar/php/8.…...

编程日记 2023/11/14 19:46:13

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

本篇文章以CAN卡的使用为基本线索&#xff0c;介绍了在汽车电子领域涉及的一些CAN卡使用流程&#xff0c;搭配强大的上位机可以实现诸多功能。文章并没有局限于一种CAN卡&#xff0c;而是针对PCAN和同星的CAN卡分别以常用CAN报文收发以及诊断控制台实现这两种方向进行了CAN卡使…...

编程日记 2023/11/14 19:45:12

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

C程序设计 &#xff08;第四版&#xff09; 谭浩强 例 7.13 例 7.13 有一个3*4的矩阵&#xff0c;求所有元素中的最大值。 IDE工具&#xff1a;VS2010 Note: 使用不同的IDE工具可能有部分差异。 代码块 方法&#xff1a;使用指针、动态分配内存 #include <stdio.h> …...

编程日记 2023/11/14 19:44:11

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

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

编程日记 2023/11/14 19:43:11

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

插入-》函数&#xff1a; 选择RAND函数&#xff1a; 点击“继续”&#xff1a; 点击“确定”&#xff0c;就生成随机数了&#xff1a;...

编程日记 2023/11/14 19:42:09

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

目录 IP安全概述 IPSec协议簇 IPSec的实现方式 AH&#xff08;Authentication Header&#xff0c;认证头&#xff09; ESP&#xff08;Encapsulating Security Payload&#xff0c;封装安全载荷&#xff09; IKE&#xff08;Internet Key Exchange&#xff0c;因特网密钥…...

编程日记 2023/11/14 19:41:08

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

在MYSQL中&#xff0c;一些表的集合称为一个数据库。MYSQL服务器管理若干个数据库&#xff0c;每个数据库下都可有若干个表。 1.展示数据库 SHOW DATABASES; 2.创建数据库 如&#xff1a;CREATE DATABASE myname; 更智能语法&#xff0c;可用&#xff1a;CREATE DATABASE IF …...

编程日记 2023/11/14 19:40:07

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

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

编程日记 2023/11/14 19:39:06

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

在当今数字化的时代&#xff0c;网络营销已经成为企业策略的重要组成部分。而对于进去海外市场的跨境玩家来说&#xff0c;海外的推广推广是重中之重。然而&#xff0c;在开展推广的过程中&#xff0c;我们常常会遇到各种挑战&#xff0c;如地域限制、访问速度慢等。 为了解决…...

编程日记 2023/11/14 19:37:03

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

​ 改造ffmpeg/doc/examples/remuxing.c&#xff0c;支持将输入流转封装为hls协议对应的github地址&#xff1a;GitHub - yagerfgcs/FFmpeg at examples/remuxing_support_hls修改点&#xff1a;增加设置hls头 // example:https://www.ffmpeg.org/ffmpeg-all.html#hls-2 // f…...

编程日记 2023/11/14 19:35:01

npm install导致的OOM解决方案

文章目录 问题记录解决方法Linux重启排查方法 如何排查Linux自动重启的原因 问题记录 我在华为云服务器配置npm开发环境的时候&#xff0c; SSH远程连接一直掉线&#xff0c;无奈提了工单&#xff0c;被告知是NPM install导致的OOM问题。无语了&#xff0c;破NPM还有这个问题呢…...

编程日记 2023/11/14 19:34:00

HTTP和HTTPS详解

一)什么是HTTP协议 1)HTTP协议是倾向于相遇业务层次上面的一种协议&#xff0c;传输层协议主要考虑的是端对端之间的一个传输过程&#xff0c;TCP重点进行关注的是可靠传输&#xff1b;咱们的HTTP/1&#xff0c;HTTP/2是基于TCP的&#xff0c;但是咱们的HTTP/3是基于UDP的&…...

编程日记 2023/11/14 19:32:59

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

模版方法 钩子函数 回调函数 在父类里面有一个模版方法&#xff0c;在这个方法里面调用了op1&#xff0c;op2&#xff0c;op3… 在子类里面如果想要改变父类的op1和op2 只需要重写op1和op2&#xff0c;那么这个重写之后的方法&#xff0c;可以在父类里面直接调用的到 例子: J…...

编程日记 2023/11/14 19:31:58

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

数据安全很重要的原因是因为数据是现代社会的重要财产之一。很多组织和企业依赖数据来做出商业决策&#xff0c;管理客户关系&#xff0c;进行财务规划等等。如果这些数据泄露或遭到黑客攻击&#xff0c;那么就会影响企业的经济利益&#xff0c;甚至影响到个人的隐私和安全。此…...

编程日记 2023/11/14 19:29:55

git push 操作代码回退

git reset revert 回退回滚取消提交返回上一版本 总有一天你会遇到下面的问题. (1)改完代码匆忙提交,上线发现有问题,怎么办? 赶紧回滚. (2)改完代码测试也没有问题,但是上线发现你的修改影响了之前运行正常的代码报错,必须回滚. 这些开发中很常见的问题,所以git的取消提交…...

编程日记 2023/11/14 19:28:54

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

ESP32 芯片有 48 个引脚&#xff0c;具有多种功能。并非所有 ESP32 开发板中的所有引脚都暴露出来&#xff0c;有些引脚无法使用。 关于如何使用 ESP32 GPIO 有很多问题。您应该使用什么引脚&#xff1f;您应该避免在项目中使用哪些引脚&#xff1f;这篇文章旨在成为 ESP32 GP…...

编程日记 2023/11/14 19:26:53

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/2/8 9:34:11

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2026/1/29 8:51:33

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2026/2/2 3:59:34

负载均衡器》》LVS、Nginx、HAproxy 区别

虚拟主机 先4&#xff0c;后7...

编程新知 2026/2/4 13:29:03