Image Cropping - polygon

Custom Components
1

Streamlit-cropper is a great component. It looks like it can crop a rectangular image only. Is there a way to draw and crop a polygon using this component?

I am aware of * streamlit-drawable-canvas component. However, the drawable canvas that it offers is quite small ( I think height can be just 150).

2

Hi @amitgoel ,

Welcome to the Streamlit Community Forum :partying_face:

Probably Fanilo (creator of the Streamlit drawable canvas) can best answer to this and help you with workarounds.

cc @andfanilo

Best
Avra

3

Hoy,

You can edit the height and width parameters of drawable canvas and use the polygon drawing mode :slight_smile: then you’ll have to manually crop your image with the output drawn polygon (you can definitely check out streamlit-cropper source code for this)

Hope it helps you get started!
Fanilo

1 Like
4

Hi @andfanilo, I am able to change height and width of st_canvas now. Thanks a lot !

Actually, I had tried these parameters before creating this topic. However, the changes didn’t show up in the streamlit app just by clicking on ‘Rerun’ option in top right corner of the app. And so I thought this thing doesn’t work. Seeing your response, I reloaded the page this time after changing height & width and that’s when it worked. Seems like these parameters don’t take effect just with ‘Rerun’.

A question for polygon drawing mode. I get the below path with canvas_result.json_data[“objects”][0][“path”]. In this, is the data point with ‘M’ in it the point where polygon drawing was started? Are all 'L’s connecting data points that are drawn?
and does ‘z’ indicate end of polygon?

[[‘M’, 259, 96], [‘L’, 256, 196], [‘L’, 350, 238], [‘L’, 355, 182], [‘z’]]

5

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