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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/141887.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java8 : Collectors.groupingBy(分组)

Collectors.groupingBy配合Stream流使用&#xff0c;可以对集合中一个或多个属性进行分组&#xff0c;分组后还可以做聚合运算。 首先把数据放入集合&#xff1a; Product prod1 new Product(1L, 1, new BigDecimal("15.5"), "面包", "零食");…

低代码与传统开发:综合比较

近年来&#xff0c;低代码开发作为软件开发的趋势获得了显着的发展势头。根据 MarketsandMarkets 的数据&#xff0c;低代码开发市场预计将实现 28.1% 的大幅增长率&#xff0c;到 2025 年价值将达到 455 亿美元。这一显着增长表明了各行业和企业对低代码平台的需求和采用不断增…

2023前端流行的新技术

作为2023年之前的技术水平有限&#xff0c;以下是一些目前为止较为热门的前端开发技术和趋势&#xff0c;这些技术可能在2023年之前进一步发展和普及。 前端程序员可以考虑学习和掌握以下技术&#xff1a; 1.Vue 3和React Hooks&#xff1a;Vue.js和React是目前最受欢迎的JavaS…

人工智能基础_机器学习027_L2正则化_岭回归_非稀疏性_原理解读_公式推导---人工智能工作笔记0067

然后我们再来看一下岭回归,也就是第二范数对吧, 他的公式,平方以后,加和然后开平方.L2的公式是 可以看到L2公式,也是有个阿尔法,惩罚项对吧. 可以看到因为L2带有平方,所以他的图形是个圆形 我们可以把L2范数,进行画出来看看 这里我们先看L2的公式,这里我们让 这个公式写成1 …

2023-11-14 mysql-主从复制-重置主从连接-记录

摘要: mysql的主从复制, 当从库执行binlog出错后, 会中止主从复制. 此时需要重置主从连接, 以重建主从关系. 主库操作: 一. 清理同步的数据库 drop database test;二. 重置主库状态 reset master;reset slave all;三. 检测主库状态 show master status;mysql> show master…

【已解决】vscode 配置C51和MDK环境配置

使用命令 gcc -v -E -x c - 看自己gcc 有没有安装好 也可以在自己的vscode中新建一个终端 gcc -v g -v 首先把自己的C51 和MDK 路径 设置好 vscode 中设置 C51 和 MDK 的路径 这是你keil 中写 51单片机和 STM32 的 如果你出现什么include 的什么波浪线&#xff0c;那估计…

2023亚太杯数学建模B题思路解析

文章目录 0 赛题思路1 竞赛信息2 竞赛时间3 建模常见问题类型3.1 分类问题3.2 优化问题3.3 预测问题3.4 评价问题 4 建模资料5 最后 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 竞赛信息 2023年第十三…

基于FPGA的图像RGB转HLS实现,包含testbench和MATLAB辅助验证程序

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1计算最大值和最小值 4.2计算亮度L 4.3计算饱和度S 4.4计算色调H 5.算法完整程序工程 1.算法运行效果图预览 将FPGA结果导入到MATLAB显示效果&#xff1a; 2.算法运行软件版本 Vivado…

react hook ts 实现 列表的滚动分页加载,多参数混合混合搜索

InfiniteScroll 的组件见&#xff1a; https://blog.csdn.net/Zhooson/article/details/134396945 search.tsx 页面 import { FC, useEffect, useState } from react import InfiniteScroll from ../../components/InfiniteScrollconst tabs [{id: 1,title: tab-1,index: 1…

【python】选数

题目&#xff1a; """ 题目描述&#xff1a; 给定一个由 n 个整数组成的序列x_1, x_2,..., x_n)&#xff0c;以及一个整数 k ( k < n )。从这 n 个整数中选择 k 个整数相加&#xff0c;可以得到多种不同的和。例如&#xff0c;当 n 4&#xff0c;k 3&#…

国际阿里云:云服务器灾备方案!!!

保障企业业务稳定、IT系统功能正常、数据安全十分重要&#xff0c;可以同时保障数据备份与系统、应用容灾的灾备解决方案应势而生&#xff0c;且发展迅速。ECS可使用快照、镜像进行备份。 灾备设计 快照备份 阿里云ECS可使用快照进行系统盘、数据盘的备份。目前&#xff0c;阿…

快手自动引流软件的运行分享,以及涉及到技术与核心代码分享

先来看实操成果&#xff0c;↑↑需要的同学可看我名字↖↖↖↖↖&#xff0c;或评论888无偿分享 一、引言 引流是任何网络创业者或营销人员必备的技能之一。手动引流不仅耗时&#xff0c;而且效果难以保证。因此&#xff0c;自动引流软件应运而生&#xff0c;成为许多人的得力助…

Python中的filter函数用法详解

目录 引言 一、filter函数基本用法 二、filter函数应用场景 1、筛选符合条件的元素 2、数据清洗和预处理 3、复杂条件筛选 4、与其他函数结合使用 三、filter函数与lambda表达式 四、filter函数与列表推导式 五、总结 引言 Python中的filter函数是一种内置的高效过滤…

OpenGL学习之路-2

glut程序 8.多窗口且子窗口能够跟随reshape的变化而变化 /// #include <GL/glut.h> #include <iostream>/// int winWidth, winHeight; // <<NEW!!! int mainWinID; //…

15. 机器学习——聚类

机器学习面试题汇总与解析——聚类 本章讲解知识点 什么是聚类K-means 聚类算法均值偏移聚类算法DBSCAN 聚类算法高斯混合模型(GMM)的期望最大化(EM)聚类层次聚类算法本专栏适合于Python已经入门的学生或人士,有一定的编程基础。 本专栏适合于算法工程师、机器学习、图像…

从道一云到畅捷通T+通过接口配置打通数据

从道一云到畅捷通T通过接口配置打通数据 接通系统&#xff1a;道一云 在道一云坚实的技术基础上&#xff0c;道一云推出全新升级的2.0产品矩阵&#xff0c;分别是低码平台、智能门户、场景应用。基于云原生底座&#xff0c;为企业提供集智能门户解决网关流量问题、企业微信端的…

Linux上部署服务

这里以python脚本为例 创建服务&#xff1a; # 查看已有的服务有哪些 cd /etc/systemd/system ls# 创建新服务 sudo vim test.service#编辑service文件内容&#xff08;如果无法输入或修改&#xff0c;点击i代表insert&#xff09; [Unit] Description项目描述Wantsnetwork.t…

es 7.0常用的命令

es 7.0常用的命令 es 7.0中只有索引和文档(document)&#xff0c;没有类型(type)了。 es新建索引&#xff1a; 格式&#xff1a; PUT /索引名称 {"mappings":{"properties":{"字段名称":{"type":"字段类型"}}} }PUT 加索…

Spring Cache 入门教程

一&#xff1a;Spring缓存抽象 Spring从3.1开始定义了org.springframework.cache.Cache和org.springframework.cache.CacheManager接口来统一不同的缓存技术&#xff1b;并支持使用JCache&#xff08;JSR-107&#xff09;注解简化我们开发&#xff1b; Cache接口为缓存的组件规…

提升效率!MuLogin指纹浏览器自动执行重复任务

在现代生活和工作中&#xff0c;我们经常需要处理各种繁琐的重复任务&#xff0c;这不仅浪费时间和精力&#xff0c;还可能导致效率低下。幸运的是&#xff0c;MuLogin指纹浏览器提供了强大的自动化功能&#xff0c;可以自动执行重复任务&#xff0c;并通过编写脚本和API接口的…