Allow canvas functionality on top of pdfs

🧩 Custom Components
1

Following @fdasilva tweet about canvas functionality using streamlit here you have a case representing the need for implementing canvas ON TOP of pdfs.

Imagine you want to anotate pdfs manually. add notes. add colors. add annotations for your colleagues.

image
image1468×952 275 KB

I think the image shows all.
Other uses are evident like taking notes on legal documents, on articles, etc

Following this Thread in twitter:

@joseberlines

@fdasilva59fr

@0lga_petrova

2

Hi @Joseberlines

With Streamlit Drawable Canvas v0.4.0, you can now put a background image behind the canvas. You should be able to convert your pdf to an image in your app (maybe with pdf2image) and send it as argument of the canvas!

1 Like
3

Hi. I want the drawable canvas to return a 3-dimensional numpy array instead of a 4-dimensional one so that I can overlay this on another image. Could you please help me out with it?
( Use case: I am asking the user to ‘sign’ in the canvas and I will be overlaying this on a prescription image - Doctor application)

4

Hey @Sharan19, the 4th channel is the alpha channel, you can delete it with some numpy manipulation:

canvas_result = st_canvas(background_color="#cec", height=100)

if canvas_result.image_data is not None:
    st.image(canvas_result.image_data)
    st.image(canvas_result.image_data[:,:,:3])
    st.write(canvas_result.image_data)
    st.write(canvas_result.image_data[:,:,:3])
2 Likes