Allow canvas functionality on top of pdfs

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

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

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!

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)

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])
1 Like