如何使用 render_template 烧瓶向 html 显示 PIL 图像？

Question

我试图用 PIL 包显示我编辑过的图像，当我试图让它在 html <img src=''></img> 上显示时，它什么也没有出现，但我看到了文件名检查元素是 <img src="<_io.BytesIO object at 0x000001EDA8F76E00>">。如何让编辑后的图片正常显示？

app.py

@app.route("/api/games/shipper/image/", methods=["GET"])
def games_shipper():
    ... # My stuff up here
    image_io = BytesIO()
    img.save(image_io, "PNG")
    image_io.seek(0)
    return render_template('image.html', image_data=image_io)

image.html

   ... // My stuff up here
   <body>
      <center>
         <image src="{{ image_data }}"></image>
      </center>
   </body>

Answer 1

您需要在 Base64 中对您的图像进行编码才能直接在 img 标签中显示它，参见例如How to display Base64 images in HTML

在 Flask 模板中显示图像的传统方式是将图像保存在 Flask 的 static 文件夹中，然后 link 将其保存在您的模板中

<body>
      <center>
         <image src="/static/{{image_name}}.png"></image>
      </center>
   </body>

Answer 2

可以用getvalue()函数从缓冲区中读取数据，然后进行转换。然后可以将 base64 编码的数据作为数据 url.

传递给 src 参数

from base64 import b64encode

@app.route("/api/games/shipper/image/", methods=["GET"])
def games_shipper():
    ... # My stuff up here
    image_io = BytesIO()
    img.save(image_io, 'PNG')
    dataurl = 'data:image/png;base64,' + b64encode(image_io.getvalue()).decode('ascii')
    return render_template('image.html', image_data=dataurl)

如果将图像作为数据传递url，则无法收缩字符串。但是，有可能将文件作为纯图像数据提供。为此，您可以在另一个端点中使用 send_file。您在一个端点中提供页面（模板），在一秒钟内提供图像文件。

from flask import send_file

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/image')
def game_shipper():
    # ...
    image_io = io.BytesIO()
    img.save(image_io, format='PNG')
    image_io.seek(0)
    return send_file(
        image_io,
        as_attachment=False,
        mimetype='image/png'
    )

  <body>
    <center>
      <img src="{{ url_for('game_shipper') }}" />
    </center>
  </body>

如何使用 render_template 烧瓶向 html 显示 PIL 图像？

How can I display PIL image to html with render_template flask?

html

flask

python-3.x