st_canvas does not display background image in multipage streamlit app

[hanisalah]

Hello I am building a multipage streamlit app and in one of the pages I want to use the awesome streamlit drawable canvas. Tracing my issue, I found that canvas does not show the background image in case the canvas is called in one of the pages of the app. However, if I use the same code in the main page of the app, the background image is displayed. Help would be appreciated.

My code snippet is:

col1, col2 = st.columns(2)
    with col1:
        drawing_mode = st.selectbox('Draw',('rect','point'))
    with col2:
        stroke_color = st.color_picker('Stroke Color HEX: ')
    RGBimg = st.file_uploader('Select Image', type=['png','jpg'], key='dset_fu1', accept_multiple_files=False)
    fill_color = 'rgba(255,165,0,0.3)'
    canvas_result = st_canvas(fill_color=fill_color, stroke_width=15, stroke_color=stroke_color, background_color='#000000', background_image=Image.open(RGBimg) if RGBimg else None, update_streamlit=True, height=400, width=400, drawing_mode=drawing_mode, point_display_radius = 5 if drawing_mode=='point' else 0, key='canvas')

My setup is: Windows 10 Google chrome python 3.8 streamlit 1.12.2 streamlit-drawable-canvas 0.9.2

[julienperichon]

I have the exact same problem on my project !

[julienperichon]

Coming back on it, I tested with version 0.9.0 and background images can be displayed on Streamlit subpages. So @hanisalah if you can afford it I would recommend retrograding to streamlit-drawable-canvas==0.9.0.

Tracing the commit history, it seems that #85 introduces this bug.

[hanisalah]

@julienperichon I will definitely give that a try and feed you back. thanks

[hanisalah]

@julienperichon Tried it out and it is working indeed.

[hanisalah]

@andfanilo and @julienperichon Now another issue pops out: Version 0.9.0 works fine for local streamlit app. Now, I am trying to deploy the app on streamlit cloud. I though just going to version 0.9.2 should then be fine. Unfortunately, on streamlit cloud, neither 0.9.0 nor 0.9.2 show the background image. One difference though, I am doing differently from the widely used example is that I don't call the background image with a PIL.open() but rather from a PIL.fromarray(). The reason is I first take the images from user (using st.file_uploader), and process it in some manner (using opencv) before introducing it back to canvas.

[aviadmx]

For me version 0.9.0 doesn't show background as well

[andfanilo]

Hey, I think I'm going to put #85 behind an argument, during the holidays. Can you tell me if at least 0.8.0 work on your side?

[RyanMellor]

Hey, I was experiencing the same issue. 0.9.2 doesn't display background images (for multi page apps) locally or on the cloud. 0.9.0 works locally but does not work after uploading to streamlit cloud. 0.8.0 works both locally and on the cloud.

[darwinharianto]

Hi, same issue, not multipage app, just single page 0.9.2 works only local 0.9.0 works on huggingface space and local

[alexlib]

Same here, not working on multipage apps. the path to the image is /media/... and it's probably not the same one for the canvas under /pages folder