[flask框架]下:前端发起请求,服务器用[python]读取[本地图片]并转码[base64],传至前端显示

本文介绍如何在Flask应用中,使用Python读取本地图片,转换为Base64编码,并通过AJAX请求响应给前端,利用jQuery和JavaScript在网页上显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • 前端 jQuery + AJAX 请求
$.ajax({
    type : 'POST', // POST方法
    
    // 服务器所在,注意要与app.py中的
    // @app.route('/back_end', methods=['POST', 'GET'])
    // 中的第一个参数相对应
    url : '/back_end', 

    // 将data转换成JSON字符串(data为存储数据的变量的名)
    // 该文章中,这个传送给服务器的data并未被使用
    // 只是为了发起一个请求,得到服务器的反馈
    data : JSON.stringify(data), 
     
    // 发送给服务器的数据类型				
    contentType: 'application/json; charset=UTF-8', 

    // 规定预期的服务器响应的数据类型
    dataType : 'json', 
    
    // 请求成功后,接受服务器返回的数据,在参数img中({'ok': s})
    success : function(img) { 
        var picture = document.createElement('img'); // 创建一个img元素
        
        // 该img元素将会成为 id 为 pictureLocation 的 div 的孩子,需获取这个元素
        var d1 = document.getElementById('pictureLocation'); 

        // 设置这个img元素的一些属性
        // img元素的 src 尤为重要:
        // img.ok中存储的是图片的base64,且图片原先的格式是png;在 src 中均有体现
        picture.src = 'data:image/png;base64,' + img.ok;
        
        picture.alt = "";
        picture.width = d1.clientWidth;
        picture.height = d1.clientHeight;
        d1.appendChild(picture);
    },

    // 请求出错执行的函数
    error : function(xhr, type) {
        alert("ERROR!");
    }
});
  • 服务器
from flask import Flask, request, jsonify
# app.py顶部要引入request, jsonify
@app.route('/back_end', methods=['POST', 'GET'])
def back_end():  # 获取前端数据,将图像base64反馈给前端
    import base64
    data = request.get_json() # data在本文中并未被使用
    # open的第一个参数为图片所在路径,第二个为读取的方式
    # 图像一般以二进制格式读取:rb
    with open('static/image1.png', 'rb') as img_f:
        img_stream = base64.b64encode(img_f.read())
        s = img_stream.decode()
    return jsonify({'ok': s}) # 返回JSON格式的数据
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值