Image overlay on camera (image uploader)

Need help
1

Hey guys!

Got quite an interesting problem that I am facing. Hoping someone here has an answer!

Scenario:
I am building a workout tracker and one of the features that I want to include is taking a progress picture after each workout, and I want to make a movie with those images to show the progress that they have made.

Problem:
User pictures are taken from slightly different perspectives/angles or closer/further away from the mirror, making the body look different from frame to frame. I thought of 2 solutions, but I don’t know how to implement them in Bubble, so I am asking for your help.

  1. How can I show a transparent overlay of the previous progress image on the camera, to avoid users from taking pictures from different angles or far/closer away from the mirror? I want all the images to be well aligned.
  2. If that is too complicated, how can I crop or process the images within Bubble so that they align around the body of the user. I noticed there is a “Auto crop around the face” function when processing with Imgix, which does exactly what I want. But instead of face, I want it around the full body.

Let me know if you need more context.

Cheers,
Admir

2

You can use something like this:

To get the camera capture element, and then just throw it in a “Fixed” group and put an image on top:

image
image522Ă—862 58.1 KB

Bubble doesn’t generally support setting the opacity of image elements, so to make the old image partially transparent you’d need to process the image separately beforehand or maybe do some sort of CSS trick.

I think you could use something like this, and then apply an opacity value of less than 1 to the image element using CSS:

1 Like
3

Oh this is awesome, exactly what I need. Will give it a try once I set up a credit card in Bubble. I see it is a paid plugin :).

Thanks @melbournemarsden

4

This topic was automatically closed after 70 days. New replies are no longer allowed.