Feed a ndarray image to the src attribute of a Img component

Hello, I’m pretty new to Dash.

I try to display a ndarray through the src attribute of a Img component. I can display a png file from the server just fine with the data:image/png;base64.{}.format method, but then I also have image that I get from the server code in the format of a numpy array (ndarray). I could save the ndarray as a png on the server then doing something similar to what I do in the get_placeholder_thumbnail_html_value method, but it doesn’t seem to be a correct approach to this.

def get_placeholder_thumbnail_html_value():
    encoded_image = base64.b64encode(open("../assets/placeholder_thumbnail.png", 'rb').read())
    return 'data:image/png;base64,{}'.format(str(encoded_image.decode()))

def get_thumbnail_html_value_from_ndarray(ndarray):
    return 'data:image/png;base64,{}'.format(<what here ?>)

@app.callback(
    output=dash.dependencies.Output("thumbnail-channel1-img", "src"),
    inputs=[dash.dependencies.Input("refresh-button", "n_clicks")]
)
def load_image_channel1(n_clicks):
    ndarray = ra.get_ndarray_by_index(0)
    if image is None:
        res = get_placeholder_thumbnail_html_value()
    else:
        res = get_thumbnail_html_value_from_ndarray(ndarray)
    return res

What do I have to do to convert my ndarray into a string of bytes that fit into a data:image/png;base64.{}.format ?

Thanks

2 posts - 2 participants

Read full topic