Creating a Snapchat-like photo editor
Snapchat has a feature where once you take a photo, you can write stylized text and draw directly onto your photo. I'm trying to build a website that will provide a blank canvas that users can write/draw onto in a similar fashion.
Has anyone built something like this before? Any pointers on how to get started are greatly appreciated!
Thanks!
Trending on Indie Hackers
I haven't done the drawing / text aspect, but I did do a bunch of filters a long time ago.
Feel free to look at my source here:
https://www.davidwparker.com/graphics/miniphotobooth/
Note: all the heavy lifting is done in WebGL.
Nice! It looks great. Did WebGL have a steep learning curve?
yes-ish.
Assuming you're willing to have deep focus + learn I didn't think so.
I have a huge youtube series on it here (108 videos):
https://www.youtube.com/watch?v=oDiSqQT_szo&list=PLPqKsyEGhUnaOdIFLKvdkXAQWD4DoXnFl
Since Pixlr been around for ages I assume it can't be that hard. Probably standard HTML5 Canvas + Javascript should do most of the tricks. More sophisticated filters and image analysis things might be a bit more tricky.
Thanks for the input! I had honestly no clue why I didn't know what Pixlr existed - it's literally free online Photoshop.
I'm working on Doka Image Editor, might be similar?
Markup/draw tooling is a bit underdeveloped at the moment but will improve in future release.
Tip. You probably want to do this in WebGL for performance reasons.
Man doka is super cool... This is what I call a delightful user experience
Thanks! That’s what I’m aiming for :)
Hey! I checked out Doka Image Editor and it honestly looks super cool. The design is really intuitive and clean. Thanks for the WebGL tip! I'm embarrassingly new to web development haha.
Thanks! And good luck 👍😊