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)
2 Likes
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.
Thanks @tonykip for the suggestion!
Have deployed a demo app over at this link: streamlit-cropperjs
1 Like
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)
1 Like
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"
)
Hi!
Can you tell me how I can place the edited and processed image in st.columns?
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")
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.
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()
