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

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

news 2026/6/3 4:01:27

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

软阴影：那个让虚拟世界“温柔起来“的光影小秘密

一、从一只小猫的影子说起 前几天我在朋友家做客&#xff0c;他家养了一只胖乎乎的橘猫&#xff0c;正趴在阳台的窗边晒太阳。我无意间瞥了一眼那只猫脚边的影子&#xff0c;突然被一个细节震撼了—— 那只猫的影子——并不是一片均匀的黑。 仔细看——猫肚子紧贴地板的地方——…...

编程新知 2026/5/26 2:29:35

为你的Hermes Agent自定义Provider，接入Taotoken多模型池

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为你的Hermes Agent自定义Provider&#xff0c;接入Taotoken多模型池 在构建复杂的AI应用时&#xff0c;开发者常常面临一个核心挑…...

编程新知 2026/5/25 21:21:36

别再手动测模型了！用Simulink Test Manager实现自动化测试（附Excel表格配置详解）

从手动测试到智能验证&#xff1a;Simulink Test Manager全流程自动化实战指南 在模型开发的迭代过程中&#xff0c;工程师们常常陷入"修改-测试-记录"的循环泥潭。每次参数调整后&#xff0c;手动运行模型、记录数据、比对结果不仅消耗大量时间&#xff0c;更可能因…...

编程新知 2026/5/25 20:55:13

【Lindy营销自动化工作流终极指南】：20年实战验证的7大反脆弱性设计原则，92%企业漏掉的关键衰减阈值

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Lindy营销自动化工作流的基本范式与历史验证 Lindy效应指出&#xff0c;一个事物的预期剩余寿命与其当前年龄成正比——在营销自动化领域&#xff0c;Lindy范式体现为&#xff1a;经时间检验仍被广泛采…...

编程新知 2026/5/25 20:53:11

泰拉瑞亚地图编辑器：从像素画布到创意世界的蜕变之旅

泰拉瑞亚地图编辑器&#xff1a;从像素画布到创意世界的蜕变之旅 【免费下载链接】Terraria-Map-Editor TEdit - Terraria Map Editor - TEdit is a stand alone, open source map editor for Terraria. It lets you edit maps just like (almost) paint! It also lets you cha…...

编程新知 2026/5/27 14:43:25

别只盯着主控芯片！拆解STM32最小系统板：电源、时钟、复位三大支柱电路深度解析

STM32最小系统板设计进阶&#xff1a;电源、时钟与复位电路的工程实践 在嵌入式系统开发中&#xff0c;我们常常将注意力集中在主控芯片的功能实现上&#xff0c;却忽略了支撑系统稳定运行的三大基础电路——电源、时钟和复位。这些看似简单的电路模块&#xff0c;实则是整个系…...

编程新知 2026/5/25 16:00:19

如何高效使用HiveWE：魔兽争霸III地图制作的完整秘籍

如何高效使用HiveWE&#xff1a;魔兽争霸III地图制作的完整秘籍 【免费下载链接】HiveWE A Warcraft III world editor. 项目地址: https://gitcode.com/gh_mirrors/hi/HiveWE 还在为魔兽争霸III原版编辑器加载缓慢、操作卡顿而烦恼吗&#xff1f;HiveWE作为一款专注于速…...

编程新知 2026/5/25 15:37:41

每日一书㉗ | 刻意练习：为什么有些人努力一辈子还是平庸？

“本文来自「乐想屋」公众号&#xff0c;系列更新[每日一书]&#xff0c;每次5分钟&#xff0c;帮你把书读薄&#xff0c;把知识用活”先问你一个问题。你身边有没有这样的人&#xff1a;入行时间比你短&#xff0c;但能力已经甩你好几条街。他们好像没有特别刻苦&#xff0c;但…...

编程新知 2026/5/25 15:26:07

Linux命令：perf

perf 命令 基本介绍 perf&#xff08;Performance Counters for Linux&#xff09;是 Linux 系统中用于性能分析的强大工具套件。它基于内核性能计数器&#xff08;PMC&#xff09;&#xff0c;可以分析 CPU 使用率、内存访问、缓存命中率、分支预测等硬件级性能指标&#xff0…...

编程新知 2026/5/25 13:53:21

Python爬虫避坑手册：10年爬取经验总结，看完再也不会被封IP

做爬虫这么多年，我见过太多新手从入门到放弃，不是因为学不会Python，而是被各种反爬机制虐得怀疑人生。 我刚入行的时候，写的第一个爬虫是爬某电商网站的商品价格。当时觉得爬虫不就是发个请求，解析个HTML吗？结果代码刚跑了5分钟，IP就被封了。我当时还傻乎乎地重启路由器…...

编程新知 2026/5/25 13:01:32