如何在Flask API中显示POST请求体中的Canvas图像？

我尝试显示从浏览器HTML Canvas捕获的图像。用户可在Canvas上绘图，我希望将图像发送到Flask API，后续用OpenCV处理，但目前连显示图像都遇到问题。

现有代码 #

HTML代码 #

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
<head>
  <title>Drawing Tool</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Drawing Tool</h1>
  <canvas id="canvas" width="400" height="300"></canvas>
  <button id="clear-button">Clear</button>
  <button id="submit-button">Submit</button>
  <script src="index.js"></script>
</body>
</html>

index.js代码 #

submitButton.addEventListener('click', function (e) {
  canvas.toBlob((blob) => {
    var formData = new FormData()
    formData.append('image', blob, 'image.jpg')
    fetch('http://localhost:105/sendImg', {
      method: "POST",
      body: formData
    })
      .then(response =>
        console.log(response)
      )
      .catch(err =>
        console.log(err)
      )
  }, 'image/jpeg', 0.95);
});

server.py代码 #

app = Flask(__name__)
CORS(app)

@app.route('/sendImg', methods=['POST'])
def showImage(): 
    file = request.files['image']
    file.save('image.jpg')
    with open('image.jpg', 'rb') as f:
        image = Image.open(io.BytesIO(f.read()))
    image.save('processed_image.jpg')
    image.show()

    return 'OK'

问题排查与修复方案 #

1. 前端核心缺失：DOM元素获取与绘图逻辑 #

原JS代码未获取canvas和submitButton元素，直接调用会触发报错，且缺失基础绘图功能。修改后的index.js：

// 先获取DOM元素
const canvas = document.getElementById('canvas');
const submitButton = document.getElementById('submit-button');
const clearButton = document.getElementById('clear-button');

// 基础绘图逻辑
let isDrawing = false;
let lastX = 0;
let lastY = 0;

function draw(e) {
  if (!isDrawing) return;
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 2;
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

// 清空画布功能
clearButton.addEventListener('click', () => {
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});

// 提交逻辑优化
submitButton.addEventListener('click', function (e) {
  canvas.toBlob((blob) => {
    const formData = new FormData();
    formData.append('image', blob, 'image.jpg');
    fetch('http://localhost:105/sendImg', {
      method: "POST",
      body: formData
    })
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.text();
    })
    .then(data => console.log(data))
    .catch(err => console.error('错误:', err));
  }, 'image/jpeg', 0.95);
});

2. 后端逻辑优化：简化流程+适配OpenCV #

• 无需先保存文件再读取，直接使用文件流操作
• image.show()在无图形界面的服务器环境无法生效，建议改用文件保存或返回图像数据
• 补充OpenCV处理的示例代码

修改后的server.py：

from flask import Flask, request
from flask_cors import CORS
import cv2
import numpy as np
from PIL import Image
import io

app = Flask(__name__)
CORS(app)

@app.route('/sendImg', methods=['POST'])
def process_image(): 
    file = request.files['image']
    
    # 直接读取文件流，跳过本地临时保存
    img_stream = io.BytesIO(file.read())
    pil_image = Image.open(img_stream)
    pil_image.save('processed_image.jpg')
    
    # 转换为OpenCV兼容格式（BGR）
    cv_image = cv2.cvtColor(np.array(pil_image), cv2.COLOR_RGB2BGR)
    # 添加OpenCV处理示例：灰度化
    gray_image = cv2.cvtColor(cv_image, cv2.COLOR_BGR2GRAY)
    cv2.imwrite('gray_processed.jpg', gray_image)
    
    # 本地测试时可开启图像显示（仅在有图形界面的环境生效）
    # pil_image.show()
    
    return '图像处理完成'

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=105, debug=True)

3. 必备依赖安装 #

确保安装所有所需库：

pip install flask flask-cors opencv-python pillow numpy

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