Image cropping/ selection component

Most AI image classification tools need to resize or crop input images. Having a tool like this in streamlit will be really helpful. Is anyone working on a component for this?


Hey @johnyquest, welcome to the community !

Thanks for the request ! I don’t think anyone is looking into this for now :slight_smile:. Would Cropper.js fit the need, or do you know of other image cropper Javascript libraries ?

Anyone interested in trying to build a Streamlit Component, I think this one is a perfect usecase which should be easy to integrate (at least if referencing the image from an url. Uploading image data from Python may add a small bump to the implementation) !


1 Like

Hey @andfanilo.!
I have started working on an image cropping component for streamlit.
If everything goes well then, I’ll make a PULL request soon.


That’s great ! Looking forward to it :slight_smile: don’t hesitate to ping for feedback :wink:


Great. Thanks for doing this.

Haven’t looked at cropper.js will take a look.
But it will be great to have an integrated streamlit component

@andfanilo I’m on it and it’s about to complete.


@0xPrateek eagerly waiting for the release :slightly_smiling_face:

I needed a cropper desperately for another project I was working on, so I put one together. Let me know what you think:


Looks good on the demo posted on GitHub page. Will try it out. Thanks for sharing. It will be great if there was an option for aspect ratio / bounding box dimensions. This is awesome! Thanks a lot. :slightly_smiling_face: :boom: :clap: :checkered_flag:

Looks great :slight_smile: @turner-anderson are you able to update the community tracker with your solution ?


@johnyquest A fixed aspect ratio shouldn’t be hard at all, I actually had to work harder to find a way to unfix the aspect ratio since that was what I was most interested in. I’ll probably also work towards allowing the user to pass a bounding-box-generating function into the cropper that could override the default 20%-80% box. I’ll report back when it’s done.

@andfanilo Great idea, consider it updated!

Awesome. Thanks. For my project, I was planning to use a square aspect ratio. It might be useful for other computer vision projects as most AI models resize images to image with a square aspect ratio. I am working with medical images and changing the aspect ratio might change the properties of object in question.

Tried running this repo on my computer.
Got the following error

StreamlitAPIException: No such component directory: ‘/media/quest/extradrive1/AI_Projects/access_point/streamlit-cropper/streamlit_cropper/frontend/build’


File “/media/quest/extradrive1/AI_Projects/access_point/streamlit-cropper/”, line 2, in
from streamlit_cropper import st_cropper
File “/media/quest/extradrive1/AI_Projects/access_point/streamlit-cropper/streamlit_cropper/ init .py”, line 16, in
_component_func = components.declare_component(“st_cropper”, path=build_dir)

I must have uploaded the wrong dist, let me fix that and get the aspect_ratio implemented. I’ll knock that out tonight.

@johnyquest I just pushed the update to include the build directory, as well as add a feature for aspect_ratios. I’m in the process of uploading a new GIF for the readme. Let me know if you still have the issue, sorry for the mixup!


It is working well!
For debugging purposes you might have been printing ‘image/jpeg’ in the terminal. That line hasn’t been commented out. So it is printing ‘image/jpeg’ in the terminal.