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

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

news 2026/4/1 8:56:34

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

Qwen3.5-9B图文对话实战：工业设备铭牌识别+参数查询+维保周期提醒

Qwen3.5-9B图文对话实战&#xff1a;工业设备铭牌识别参数查询维保周期提醒 1. 项目概述 Qwen3.5-9B是一款拥有90亿参数的开源大语言模型&#xff0c;特别适合工业场景下的图文对话应用。这个项目展示了如何利用其多模态能力&#xff0c;实现工业设备铭牌识别、参数查询和维保…...

编程新知 2026/4/1 8:30:27

快速上手语音情感分析：Emotion2Vec+系统参数配置与结果解读

快速上手语音情感分析&#xff1a;Emotion2Vec系统参数配置与结果解读 1. 系统概述与核心价值 Emotion2Vec Large语音情感识别系统是一款基于深度学习的语音分析工具&#xff0c;能够自动识别语音中蕴含的情感状态。该系统由科哥团队基于阿里达摩院ModelScope平台的原始模型进…...

编程新知 2026/4/1 8:00:03

激发创意：利用快马平台ai模型辅助设计与优化cmhhc算法

激发创意&#xff1a;利用快马平台AI模型辅助设计与优化CMHHC算法 最近在做一个字符串压缩相关的项目&#xff0c;需要实现一个自定义的压缩算法CMHHC。这个算法的核心思想其实很简单&#xff1a;对于连续出现的相同字符&#xff0c;用该字符加上出现次数来表示。比如"aa…...

编程新知 2026/4/1 7:08:42

远程协助工具

# 详见&#xff1a;https://mp.weixin.qq.com/s/sY-KrOqpY3C1JUeiELEJNw # 来源&#xff1a;https://chat.qwen.ai/# ToDesk https://www.todesk.com/# 向日葵 https://sunlogin.oray.com/# TeamViewer https://www.teamviewer.com/# AnyDesk https://anydesk.com/ https://any…...

编程新知 2026/4/1 6:29:39

别再手写表单了！用Vue3+AI做个自己的低代码设计器，5分钟搞定一个页面

用Vue3AI打造个人专属低代码表单设计器&#xff1a;5分钟解放重复劳动 如果你是一名中后台开发者&#xff0c;每天被各种CRUD表单折磨得焦头烂额&#xff0c;这篇文章就是为你准备的。想象一下&#xff1a;当你接到第100个类似的用户管理表单需求时&#xff0c;不再需要从零开始…...

编程新知 2026/4/1 5:10:53

Ostrakon-VL-8B零售AI创新：用像素游戏化设计提升一线员工使用意愿

Ostrakon-VL-8B零售AI创新&#xff1a;用像素游戏化设计提升一线员工使用意愿 1. 项目背景与设计理念 在零售和餐饮行业&#xff0c;一线员工使用AI工具的意愿往往不高。传统工业级UI界面过于复杂&#xff0c;操作流程繁琐&#xff0c;导致员工抵触新技术。Ostrakon-VL-8B团队…...

编程新知 2026/4/1 4:36:09

go-zero v1.10.1 更新解析：JSON5 配置正式支持 Redis 通用命令 Do DoCtx 上线 Go 1.24 升级与 core/codec 关键安全修复全梳理

一、版本总览&#xff1a;go-zero v1.10.1&#xff0c;微服务框架的又一次关键迭代 2026年3月28日&#xff0c;国产高性能Go微服务框架go-zero正式发布v1.10.1版本。作为一次补丁式更新&#xff0c;该版本并非简单的问题修复&#xff0c;而是集新功能拓展、核心安全加固、底层依…...

编程新知 2026/4/1 4:32:07

【卷积神经网络作业实现人脸的关键点定位功能】

下面是完成这道题目的代码&#xff1a;import os import cv2 import numpy as np import pandas as pd import torch import torch.nn as nn from torch.utils.data import Dataset,DataLoader from torchvision import transforms import matplotlib.pyplot as plt1. 数据集定…...

编程新知 2026/4/1 3:51:38

告别模糊边界！用Monodepth2实战KITTI深度估计，详解自动掩码与最小重投影损失

告别模糊边界&#xff01;用Monodepth2实战KITTI深度估计&#xff0c;详解自动掩码与最小重投影损失 深度估计是计算机视觉领域的一项基础任务&#xff0c;它试图从2D图像中恢复出3D场景的几何信息。在自动驾驶、机器人导航、增强现实等应用中&#xff0c;准确的深度感知至关重…...

编程新知 2026/4/1 2:22:05

从豆瓣到StyleTalk：手把手教你用真实场景数据微调你的中文对话模型

从豆瓣到StyleTalk&#xff1a;手把手教你用真实场景数据微调你的中文对话模型 当你已经掌握了基座模型微调的基础技能&#xff0c;如何让模型真正理解特定领域的专业术语&#xff0c;或是模仿某种独特的说话风格&#xff1f;本文将带你深入实战&#xff0c;从数据清洗到效果评…...

编程新知 2026/4/1 2:07:59