Streamlit-cropperjs: A new way to crop images!

[erjieyong]

Hello everyone,

I have had the pleasure to try out streamlit-cropper by turner-anderson. It is a wonderful module for all computer vision projects! Unfortunately, I faced some issue getting the module to work properly on mobile.

As such, I took some time to integrate another amazing project from fengyuanchen: cropperjs using streamlit components.

Have released the component on pypi and can be easily installed via
pip install streamlit-cropperjs

Check out the repo at streamlit-cropperjs (github.com)

[tonykip]

Hi @erjieyong,

Thanks for sharing! Pretty cool component! I would recommend deploying a demo app of the component that the community can play with for preview.

[erjieyong]

Thanks @tonykip for the suggestion!

Have deployed a demo app over at this link: streamlit-cropperjs

[tonykip]

Hi @erjieyong,

Great! Looks good!

[jagadeesha_Gowda]

Great App​:+1:t2:.

If u could provide download option for cropped image it would be very helpful.

One suggestion : if the user upload different format than the specified format, app should alert the user to upload the correct format. (Error info)

[erjieyong]

Thanks! I’ve updated the component’s return value to allow easy and direct use of the st.download_button functionality.

cropped_pic = st_cropperjs(pic=pic, btn_text="Detect!", key="foo")
if cropped_pic:
    st.image(cropped_pic, output_format="PNG")
    st.download_button(
        "Download", cropped_pic, file_name="output.png", mime="image/png"
    )

[onoregleb]

Hi!
Can you tell me how I can place the edited and processed image in st.columns?

[erjieyong]

you can just use the default st.columns()

import streamlit as st
from streamlit_cropperjs import st_cropperjs

pic = st.file_uploader("Upload a picture", key="uploaded_pic")
if pic:
    pic = pic.read()
    cropped_pic = st_cropperjs(pic=pic, btn_text="Detect!", key="foo")
    if cropped_pic:
        col1, col2, col3 = st.columns(3)
        with col1:
            st.title("col1")
            st.image(cropped_pic, output_format="PNG")
        with col2:
            st.title("col2")
            st.image(cropped_pic, output_format="PNG")
        with col3:
            st.title("col3")
            st.image(cropped_pic, output_format="PNG")

[Vaibhav_Rachalwar]

Hi!
I’m using this code to take a snip, I’m facing a problem when I click the button Detect, the whole cropping thing goes away and nothing is displayed of the cropped part.

import streamlit as st
import fitz
from PIL import Image
import io
from streamlit_cropperjs import st_cropperjs

def main():
    st.title("Snipping tool")

    uploaded_file = st.file_uploader("Upload a PDF file", type=["pdf"])
    if uploaded_file is not None:
        page_number = st.number_input("Enter page number", value=1, min_value=1)
        pdf_page_image = get_pdf_page_image(uploaded_file, page_number)

        # Display the original PDF image
        st.image(pdf_page_image, caption=f"Original - Page {page_number}", use_column_width=True)

        if st.button("Open Cropper"):
            image_bytes = io.BytesIO()
            pdf_page_image.save(image_bytes, format='JPEG')
            pdf_page_binary_data = image_bytes.getvalue()

            crop_result = st_cropperjs(pic=pdf_page_binary_data, btn_text="Detect!", key="foo")
            print("See")
            print(f"..what..{crop_result}..")
            if crop_result is not None:
                cropped_image = Image.open(io.BytesIO(crop_result))
                st.image(cropped_image, caption="Cropped Image", use_column_width=True)
                print("See1")
                print(f"..check..{type(cropped_image)}")

@st.cache_data
def get_pdf_page_image(uploaded_pdf, page_number):
    pdf_document = fitz.open(stream=uploaded_pdf.read(), filetype="pdf")
    pdf_page = pdf_document[page_number - 1]
    pix = pdf_page.get_pixmap()
    img = Image.frombytes("RGB", [pix.width, pix.height], pix.samples)
    return img

if __name__ == "__main__":
    main()

I’ve tried removing the key, but it doesn’t help, then I put the debugging statements so crop_result is not able to store the value. Can you please advise.

[erjieyong]

Hi @Vaibhav_Rachalwar,

the issue is with too many nested buttons. Streamlit default behavior will reload the page at each button press. Hence, you need to make use of session state.

Example of a running code:

import io

import fitz
import streamlit as st
from PIL import Image
from streamlit_cropperjs import st_cropperjs

def main():
    if "uploaded" not in st.session_state and "crop" not in st.session_state:
        st.session_state["uploaded"] = False
        st.session_state["crop"] = False

    st.title("Snipping tool")

    uploaded_file = st.file_uploader("Upload a PDF file", type=["pdf"])
    if uploaded_file is not None:
        st.session_state["uploaded"] = True
        page_number = st.number_input("Enter page number", value=1, min_value=1)
        pdf_page_image = get_pdf_page_image(uploaded_file, page_number)

        # Display the original PDF image
        st.image(
            pdf_page_image,
            caption=f"Original - Page {page_number}",
            use_column_width=True,
        )

    if st.session_state["uploaded"]:
        if st.button("Open Cropper"):
            st.session_state["crop"] = True

    if st.session_state["uploaded"] and st.session_state["crop"]:
        image_bytes = io.BytesIO()
        pdf_page_image.save(image_bytes, format="JPEG")
        pdf_page_binary_data = image_bytes.getvalue()
        crop_result = st_cropperjs(
            pic=pdf_page_binary_data, btn_text="Detect!", key="foo1"
        )
        if crop_result is not None:
            cropped_image = Image.open(io.BytesIO(crop_result))
            st.image(cropped_image, caption="Cropped Image", use_column_width=True)
            print("See1")
            print(f"..check..{type(cropped_image)}")

@st.cache_data
def get_pdf_page_image(uploaded_pdf, page_number):
    pdf_document = fitz.open(stream=uploaded_pdf.read(), filetype="pdf")
    pdf_page = pdf_document[page_number - 1]
    pix = pdf_page.get_pixmap()
    img = Image.frombytes("RGB", [pix.width, pix.height], pix.samples)
    return img

if __name__ == "__main__":
    main()

[svinchon]

Hello,

I am trying to use this module but I get the following error message when trying to run the sample code:

“cannot import name ‘st_cropperjs’ from partially initialized module ‘streamlit_cropperjs’ (most likely due to a circular import)”

Can anybody help?

Many thanks in advance.

Sebastien