The Problem
A client at work approached the business with the idea of opening up their offering to the public. As part of that they required a product customiser akin to what you would find on VistaPrint.
I decided to do some research prior to this project to see what was out there. Ultimately I needed to build this myself, so I found a library called Konva that would allow me to do this.
The Experiment
I needed to have the ability to add text and images to a canvas, while being able to manipulate these elements. I also needed to be able to save the canvas as an image to be printed onto the product.
Konva provided several React components alongside its library to apply elements to a canvas and manipulate them. I used this alongside Mantine to build out the UI to make it look like a more polished product. The API it exposes provides a very simple way to manipulate the elements, especially when changing the font, its size or the colour.
Saving the canvas as a PNG was straightforward, as you could create a download link through Konvas and open it in the background. This would then download the image.
I’m yet to figure out how to adjust the ordering of layers on the canvas, but I’m sure there is a way to do this.
The Tech
This is just a simple experiment that has been built out using:
- ReactJS
- Konva (incl react-konva)
- Mantine