Canvas

Creating Photo Collages With Node-canvas

Class Story is one of our core product features at ClassDojo. It allows teachers to post photos and videos that parents can view, like, and comment on, and teachers around the world use it to share cute, funny, or exciting moments from their classrooms. Since we’re approaching the end of the school year, we wanted to provide teachers with a something memorable and engaging to send home. But with a ton of new projects we’d like to ship before back-to-school in August, we also wanted something we could build quickly.

We settled on a photo collage of a classroom’s top posts throughout the year. We generated collages for all classrooms with at least 9 posts this year and surfaced them in-app for teachers to share with their parents. We hope parents, teachers, and students everywhere will enjoy seeing a year’s worth of memories!

Here’s an example of one of the collages, using posts from our internal Class Story:

An example with the ClassDojo team

In the process, we wrote a simple npm module, photo-collage, which generates photo collages. You can view it here, and see the source code here.

Continue reading
  • Programming
  • Node.js
  • Highland
  • Canvas
  • Redshift
  • Streams