Plotly dash - 动态显示 ndarray 图像

Question

上下文：我正在尝试使用 Plotly Dash 创建一个简单的图像处理应用程序。它必须能够显示图像并在更新图像显示的同时对图像执行一些操作。图片将即时生成或上传到应用程序。

图像采用numpy ndarray 格式，因为我的处理基于使用这种格式的numpy 和matplotlib 操作。

问题： 哪些 Python 代码允许显示一个 ndarray，同时能够通过一些 GUI 操作对其进行更新？

我基本上是在搜索 dash 可以提供的最接近 matplotlib.pyplot.imshow() 的东西

研究： 在我的研究中，我发现 this repository 可能包含我开始工作所需的所有基本功能，但作为 Plotly Dash 的初学者，我很难提取我的代码需要，而且好像也不用numpy。

我找到了this question，这与我的要求非常接近，但唯一的答案不包含 numpy 数组。

Answer 1

我找到了一个解决方案，使用Flask.Response 和html.Img 的src 参数，以及用于图像编码的openCV：

import dash
import dash_core_components as dcc
import dash_html_components as html
import cv2

from flask import Flask, Response
import numpy as np
import time


def get_image(seed=0):
    # strip slide
    size = 400
    res = np.mod((np.arange(size)[..., None] + np.arange(size)[None, ...]) + seed, [255])

    ret, jpeg = cv2.imencode('.jpg', res)

    return jpeg.tobytes()


def gen():
    i = 0
    while True:
        time.sleep(0.03333)
        frame = get_image(i)
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')
        i += 1


server = Flask(__name__)
app = dash.Dash(__name__, server=server)


@server.route('/video_feed')
def video_feed():
    return Response(gen(),
                    mimetype='multipart/x-mixed-replace; boundary=frame')


app.layout = html.Div([
    html.H1("Webcam Test"),
    html.Img(src="/video_feed")
])

if __name__ == '__main__':
    app.run_server(debug=True)

结果：

在浏览器上，条带正在缓慢移动，我想 gif 会做一个更好的演示。

注意不要每秒发送太多图像，否则应用程序和浏览器会溢出，它们最终会崩溃。所以在生成器循环中使用time.pause 或其他等效限制器。

很难，我仍然很想知道其他人会如何做到这一点。这个解决方案的一个缺点是我认为用户必须共享相同的显示，定义在路径/video_feed。