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…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
dify打造数据可视化图表
一、概述 在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...