Interactive Image (editing) 🖼

Using Streamlit
,
1

Goal: Showcase an image right in the Streamlit browser and add interactivity to it, just like with certain graphs (Blog Link '22)

  1. I am running an app locally using Streamlit version 1.24.0 (with no issues, yay!).

Any suggestions on displaying an image and being able to interact with it? Please provide any suggestions or tips of current solutions!

  • For an optimal experience, allow a user to pan through the image with a simple Click-&-Drag, and if possible, throw in zooming as an extra bonus!
  • Once user is done moving around the image, could the display contents be captured and displayed (can be in the same spot or elsewhere)?
  • Can existing st.pyplots be leveraged. This could involved converting images to Matplotlib figure or exploring other components such as Altair, or others mentioned here?

Thanks all, in advance!

2

Hey @Aarooon_S,

Thanks for sharing this question. This is something that would require a custom component – check out our guide on building custom components here (plus our blog post and gallery of existing image-related components).

3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.