无需保存文件，能否将Matplotlib绘图转为Blob？Django+React场景求助

不需要额外第三方库，直接用Python标准库、Matplotlib及DRF原生功能即可实现，核心是在内存中处理图像数据，完全避免磁盘写入操作。以下是两种高效可行的方案：

方案1：返回Base64编码字符串，前端转Blob #

后端（DRF）代码示例 #

from io import BytesIO
import base64
import matplotlib.pyplot as plt
from rest_framework.response import Response
from rest_framework.views import APIView

class PlotView(APIView):
    def get(self, request):
        # 生成Matplotlib绘图
        plt.figure()
        plt.plot([1,2,3,4], [1,4,9,16])
        plt.title("Sample Plot")
        
        # 将图像写入内存缓冲区
        buffer = BytesIO()
        plt.savefig(buffer, format='png')
        buffer.seek(0)
        
        # 编码为Base64字符串
        image_base64 = base64.b64encode(buffer.getvalue()).decode('utf-8')
        plt.close()  # 关闭绘图释放资源
        
        # 返回包含Base64数据的JSON响应
        return Response({'image_data': f'data:image/png;base64,{image_base64}'})

前端（React）代码示例 #

import { useState, useEffect } from 'react';

function PlotDisplay() {
    const [imageUrl, setImageUrl] = useState('');

    useEffect(() => {
        fetch('/api/plot/')
            .then(res => res.json())
            .then(data => {
                // 解析Base64并转换为Blob
                const base64Str = data.image_data.split(',')[1];
                const byteString = atob(base64Str);
                const arrayBuffer = new ArrayBuffer(byteString.length);
                const uint8Array = new Uint8Array(arrayBuffer);
                for (let i = 0; i < byteString.length; i++) {
                    uint8Array[i] = byteString.charCodeAt(i);
                }
                const blob = new Blob([uint8Array], { type: 'image/png' });
                // 创建可访问的图像URL
                const url = URL.createObjectURL(blob);
                setImageUrl(url);
            })
            .catch(err => console.error(err));
    }, []);

    return <img src={imageUrl} alt="Matplotlib Plot" />;
}

export default PlotDisplay;

方案2：后端返回二进制图像流，前端直接接收Blob #

此方案无需Base64编码的额外开销，传输效率更高，适合大尺寸图像。

后端（DRF）代码示例 #

from io import BytesIO
import matplotlib.pyplot as plt
from django.http import FileResponse
from rest_framework.views import APIView

class PlotBinaryView(APIView):
    def get(self, request):
        # 生成绘图
        plt.figure()
        plt.bar(['A', 'B', 'C'], [3,7,2])
        plt.xlabel("Categories")
        
        buffer = BytesIO()
        plt.savefig(buffer, format='png')
        buffer.seek(0)
        plt.close()
        
        # 返回二进制图像响应，指定内容类型
        return FileResponse(buffer, content_type='image/png')

前端（React）代码示例 #

import { useState, useEffect } from 'react';

function PlotBinaryDisplay() {
    const [imageUrl, setImageUrl] = useState('');

    useEffect(() => {
        fetch('/api/plot-binary/')
            .then(res => res.blob())  // 直接将响应转为Blob
            .then(blob => {
                const url = URL.createObjectURL(blob);
                setImageUrl(url);
            })
            .catch(err => console.error(err));
    }, []);

    return <img src={imageUrl} alt="Matplotlib Plot" />;
}

export default PlotBinaryDisplay;

关键注意事项 #

• 必须调用plt.close()释放Matplotlib的绘图资源，防止内存泄漏
• 可根据需求更换图像格式（如jpg、svg），只需修改savefig的format参数和响应的content_type
• 大尺寸图像优先选择方案2的二进制流传输，性能更优

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