JavaScript渲染二进制图片方法及Flask返回图片的前端渲染与转Base64方案

我来帮你搞定这个问题！你看到的乱码其实是浏览器把二进制的PNG数据当成文本解析了，有两种靠谱的解决办法，咱们一个个说：

方法一：直接处理AJAX返回的二进制Blob数据 #

不用改后端，只需要调整你的jQuery AJAX请求配置，让它正确接收二进制数据：

1. 首先，在AJAX请求里设置xhrFields指定responseType: 'blob'，告诉浏览器这是二进制Blob数据，别当成文本解析：

$.ajax({
    url: '/your-flask-endpoint',
    type: 'POST',
    data: {/* 你的请求数据 */},
    xhrFields: {
        responseType: 'blob' // 关键配置
    },
    success: function(blobData) {
        // 用Blob生成可访问的URL
        const imageUrl = URL.createObjectURL(blobData);
        // 把URL赋值给img标签的src
        $('#your-image-element').attr('src', imageUrl);
        
        // 记得在不需要的时候释放URL，避免内存泄漏
        $('#your-image-element').on('load', function() {
            URL.revokeObjectURL(imageUrl);
        });
    },
    error: function(err) {
        console.error('请求图片失败:', err);
    }
});

2. 后端这边保持原样就行，比如Flask返回图片的代码大概是这样：

from flask import send_file, make_response
import os
import io
from PIL import Image

@app.route('/your-flask-endpoint', methods=['POST'])
def return_image():
    # 场景1：返回本地已存在的图片
    image_path = 'path/to/your/image.png'
    return send_file(image_path, mimetype='image/png')

    # 场景2：返回动态生成的图片（比如PIL处理后的）
    # img = Image.open(...)
    # img_bytes = io.BytesIO()
    # img.save(img_bytes, 'PNG')
    # img_bytes.seek(0)
    # return make_response(img_bytes.getvalue(), 200, {'Content-Type': 'image/png'})

方法二：在Flask中返回Base64编码的图片 #

如果觉得Blob处理有点麻烦，改成Base64编码确实更直观，前端直接用Data URI就能渲染：

后端Flask代码修改： #

import base64
from flask import jsonify
import os

@app.route('/your-flask-endpoint', methods=['POST'])
def return_image_base64():
    image_path = 'path/to/your/image.png'
    # 读取图片二进制数据并编码成Base64字符串
    with open(image_path, 'rb') as img_file:
        img_base64 = base64.b64encode(img_file.read()).decode('utf-8')
    # 返回JSON格式的Base64数据
    return jsonify({
        'image_base64': img_base64
    })

前端JavaScript代码： #

$.ajax({
    url: '/your-flask-endpoint',
    type: 'POST',
    data: {/* 你的请求数据 */},
    dataType: 'json',
    success: function(response) {
        // 拼接Data URI格式：data:[<mediatype>][;base64],<data>
        const dataUri = `data:image/png;base64,${response.image_base64}`;
        // 直接赋值给img标签的src
        $('#your-image-element').attr('src', dataUri);
    },
    error: function(err) {
        console.error('请求图片失败:', err);
    }
});

两种方法的对比 #

• Blob方法：更适合大图片，因为Base64会让数据体积增大30%左右，Blob是原生二进制处理，性能更好。
• Base64方法：代码更简洁，不需要处理URL释放，适合小图片或者场景简单的情况。

你可以根据自己的需求选一种就行啦！

内容的提问来源于stack exchange，提问作者FabioDev