Skip to content

kirsty-forrester/react-photo-collage

Repository files navigation

React Collage Maker

Uses React & the HTML5 canvas to create downloadable photo collage images

This project is a sample project for my portfolio and is in development, so it's not yet an installable component, but you are welcome to try it out.

Live Demo

Collage maker in action

Live Demo

Example Output

Example output

What It Does

Example output

The collage maker takes "template" images like the example above, which have colored image areas on top of a transparent background, and loads them into a canvas where you can upload images into the slots, as well as move and scale the images and change the background color. Then by clicking "Generate Collage Image," you can export a downloadable image file of your created collage.

Template Image Requirements

Template images must be named with the number of image slots in the filename, e.g. 5_squares.png. The template image must also contain some transparent space on the outside.

To Do

Make image exports work on mobile again; I switched to blobs and it isn't working on mobile safari.

About

Uses React & the HTML5 canvas to create downloadable photo collage images

Resources

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.txt

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published