【python/flask】将PIL/OpenCV图像渲染到页面

说在前面

• python版本：3.7.3
• flask版本：2.0.1
• Pillow版本：8.3.1
• opencv_contrib版本：4.5.3

场景

• 在实际应用场景中，有时需要将opencv/pillow捕获的图像显示到页面上，例如摄像头。

方法

• PIL
  使用BytesIO将编码后的图像存储在内存，然后使用flask中的send_file方法将图像发送给前端。

  def serve_pil_image(pil_img):
      img_io = BytesIO()
      pil_img.save(img_io, 'PNG')
      img_io.seek(0)
      return send_file(img_io, mimetype='image/png')
  

• CV
  方法类似(下面换了一种图片格式)

  def serve_cv_image(cv_img):
      _, encoded_img = cv.imencode('.jpg', cv_img, [int(cv.IMWRITE_JPEG_QUALITY), 95])
      img_io = BytesIO(encoded_img)
      img_io.seek(0)
      return send_file(img_io, mimetype='image/jpg')
  

• 完整代码
  (使用读取图片文件的方式来模拟)

  # main.py
  from flask import Flask, send_file
  from io import BytesIO
  from PIL import Image
  import cv2 as cv
  
  def serve_pil_image(pil_img):
      img_io = BytesIO()
      pil_img.save(img_io, 'PNG')
      img_io.seek(0)
      return send_file(img_io, mimetype='image/png')
  
  def serve_cv_image(cv_img):
      _, encoded_img = cv.imencode('.jpg', cv_img, [int(cv.IMWRITE_JPEG_QUALITY), 95])
      img_io = BytesIO(encoded_img)
      img_io.seek(0)
      return send_file(img_io, mimetype='image/jpg')
  
  mat = cv.imread("./ai.jpg")
  pil = Image.open("./ai.jpg")
  
  app = Flask(__name__)
  
  @app.route("/")
  def index():
      return "<img src='/pil'><img src='/cv'>"
  
  @app.route("/pil")
  def pilimg():
      return serve_pil_image(pil)
  
  @app.route("/cv")
  def cvimg():
      return serve_cv_image(mat)
  

运行

• CMD

  set FLASK_APP=main
  flask run
  

结果