Ionic Photo filter and stamp/ Ionic fitness plugin

Hello,
I am looking for help, orientations, advices templates or plugins in ionic market.
The first subject concerns Photo:
I want to make a camera/photo functionnality where user takes picture, apply filter, apply stamp and upload to server ou social media (retrica).
The second one concerns fitness :
I know there is a pedometer plugin, thus I know how to count steps. But what I want is to define a certain distance, when the user achives the goal, I produce a resume report in an image where I put the distance covered, number of steps, time spent and finally share in social network. Just like S. Health does.

For tracking distance, you need a background geolocation plugin like this: https://github.com/transistorsoft/cordova-background-geolocation-lt

For image editing, you can always do it yourself with HTML Canvas and image manipulation, there are some examples here: https://www.html5rocks.com/en/tutorials/canvas/imagefilters/

Same goes for stamps / text, you can draw images and text onto html canvas and then export the resulting image to an image file, or upload it.

1 Like

For instagram-like filters I have created a stencil lib for that purpose [Stencil] Instagram filters

Works fine on iPhone >= 6, on Android still in progress

Also for filters you could use CSS (google “instagram css”). Gonna works fine but it doesn’t change the images themselves, it applies on layer on the top of it.

But, I have to add, if you are at the very begin of your project and if that one is your very first, I would suggest to let the filters on the side for a first version. First master all your other subjects regarding photos before adding the cherry on the cake…but again, only my point of view

1 Like

@rlouie didn’t dig that much in the article you pointed out regarding canvas manipulation but I fear that the performance (a lot of loops) won’t be that good

I have base my library on the following brillant article about canvas and image manipulation, very good and give fast results https://www.madebymike.com.au/writing/canvas-image-manipulation/

Sure, just posted it as a starting example for filters using an html canvas. IMO, the simpler the better though. :slight_smile:

Loop performance on something like this will not likely be noticeable. That said, if something is out there that is equally simple but with better performance, that’s great. Again, I just meant that as a jumping off point. :+1:

1 Like

No worries at all @rlouie, I didn’t wanted to correct anything and I’m agree with you. I just wanted to point that out in case someone someday jumps in this feed and began to study this particular subject