Looking for way to draw on a photo and save, possibly using canvas

Expo SDK
1

Hi, I’m looking for a way for a user to take a photo, draw on the photo (possibly by dragging pre-set points and lines into place), then saving the edited photo as an image to firebase or similar.

I’m using html canvas to achieve this in a sister web app I’m building, would web view and canvas be possible/practical in the expo environment? Is there a better way that I’m missing?

Thanks for looking!

2

We’re working on a canvas-style API for our GL component, but that probably won’t be ready in time for v21.0.0.

Until that’s ready, you might try something like this

3

If you’re interested in Graphics, you can also check this out: https://github.com/expo/expo-three

4

Excellent! I’m in no real rush so I might wait for the API, any loose idea as to when that might be included?

Thanks for the link, looks like it might do the job.

5

That looks really interesting jimmylee, opens up a lot of possibilities!

1 Like
6

Is there any solution/update for this topic today please?

i would like to allow people to take a photo and draw on top of it

Thanks

7

Obviously using dedicated graphics library would be best, but I was recently prototyping a way to do this with the snapshot API.

Basically:

  1. Have an image and a “canvas” (touch-responsible view) under a single parent view (the canvas would be absolutely positioned to take up the entire view).
  2. Call Expo.getSnapshotAsync() on the parent view.

If what you’re doing is really simplistic, this might be enough. The big limitation is that the resulting image has the same resolution as the parent view. My theory (not tested at all) is that you could get a high-res copy by reproducing the view offscreen (using absolute positioning) and snapshotting that instead.

The PoC snack is here food selfie - Snack (long story on the “food selfie” thing. In short, this was a PoC for a workshop proposal and the draggable square was going to be a food image).

1 Like
8

Today I saw the release of expo-2d-context from the expo blog. If anyone has a tutorial or sample code on how to allow users to draw or make ‘MS Paint’ style app with it, it would be much appreciated!

9

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.