Export canvas as png

[alexcg1]

I'm working on a front end for a neural search framework to take a user's drawing and match it with the closest looking Pokemon: https://github.com/alexcg1/jina-streamlit-frontend

My goal is to have the user draw on the canvas, then click button to export that drawing into a base64 encoded png, which I then pass to Jina via REST API.

How can I take the np.ndarray generated by the canvas and convert that to a png? I've been trying a few things so far, but all I get is a blank transparent png in the canvas dimensions.

I'm working on the code in the draw branch: https://github.com/alexcg1/jina-streamlit-frontend/tree/draw

Thanks for putting together a cool project. I can't wait to get it working!

[alexcg1]

(Note: if you do want to play with my code, when app.py is running, select Draw from the Media selectbox)

[andfanilo]

Hey @alexcg1, thanks for the kind words, really appreciate it 😄

It looks like the following snippet works on my side:

import streamlit as st
from streamlit_drawable_canvas import st_canvas
from PIL import Image

data = st_canvas()
if data is not None:
    img_data = data.image_data
    if st.button("Save image as PNG"):
        im = Image.fromarray(img_data.astype('uint8'), mode="RGBA")
        im.save("test.png", "PNG")

and base64 conversion (not totally verified)

import streamlit as st
from streamlit_drawable_canvas import st_canvas
from PIL import Image
import base64
from io import BytesIO

data = st_canvas()
if data is not None:
    img_data = data.image_data
    if st.button("Save image as base64"):
        im = Image.fromarray(img_data.astype('uint8'), mode="RGBA")
        buffered = BytesIO()
        im.save(buffered, format="PNG")
        img_str = base64.b64encode(buffered.getvalue())
        st.write(img_str)

and you should be able to send that with requests!

Hope it helps you!

I can't wait to get it working!

BW are you going to make the app available on Streamlit Sharing 😉 ?

Cheers,
Fanilo

[alexcg1]

BW are you going to make the app available on Streamlit Sharing wink ?

For sure!

Thanks for the speedy assist. I'll give this a shot tomorrow and see how it pans out

[alexcg1]

Worked perfectly, thanks! I'll write up a blog post then later submit to Streamlit Sharing!

[andfanilo]

Great, I will be closing this then :) looking forward to the app!

[alexcg1]

And here's the app! https://share.streamlit.io/jina-ai/integration-streamlit-advanced/main/app.py

(I still need to get back-end endpoint hooked up from our end to make it work, but as soon as that's done, you'll be searching Pokemon in no time!)

[andfanilo]

Cool!!!!

Definiterly post it on the forums when it's done cooking ;)

Cheers,
Fanilo