Closed alexcg1 closed 3 years ago
(Note: if you do want to play with my code, when app.py
is running, select Draw
from the Media selectbox)
Hey @alexcg1, thanks for the kind words, really appreciate it :smile:
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 :wink: ?
Cheers, Fanilo
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
Worked perfectly, thanks! I'll write up a blog post then later submit to Streamlit Sharing!
Great, I will be closing this then :) looking forward to the app!
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!)
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/drawThanks for putting together a cool project. I can't wait to get it working!