Inspiration

During shelter in place, I've been doing distance learning for school and zoom calls with my family and friends. I was trying to think of a fun online activity that we could do together.

What it does

You upload a photo, and the website converts it into a coloring page. You can color in the coloring page on the website with a paint brush tool, paint bucket tool, and a line tool. After that you can download the colored image to print out or save.

How I built it

I used OpenCV to convert the photo to a coloring page. For the coloring tools, I built it all by myself using Javascript. I used bootstrap for the front end and Flask and Javascript for the backend.

Challenges I ran into

Making the fill tool was hard because if there was just a one pixel gap in one of the edges, the whole image would be filled. I fixed this by changing the type of edge detection algorithm I used.
Another challenge was making the paint brush tool. The default canvas paint brush tool covered the lines of the image, so I had to make my own paint brush.

Accomplishments that I'm proud of

I am very proud of making the fill bucket and the paint brush tool. For the fill bucket, I used an algorithm called floodfill to fill the selected section. To make the paint brush tool, I used recursion to fill each pixel of the square.

What I learned

I got comfortable with using Javascript. I also learned how to use the canvas element in HTML.

What's next for ColorMyPhoto

I want to add an undo feature, add a custom color picker, and a better UI.

Share this project:

Updates