Board Export Feature - MicroBoard.io

Remember how in childhood we used to cut out pictures from magazines and glue them onto drawing paper? Recently, I caught myself thinking that our Microboard is like that same drawing paper, but on steroids. And you know what? We've made it even cooler.
Now you can export the entire board as a single image. It sounds simple, but behind this simplicity lies a powerful tool for creativity and productivity.
Technically, here's how it works: we use Canvas rendering to create an image of the entire board, scaled up to 4,000 pixels. The process is optimized so that even large boards with hundreds of elements convert in just seconds. Currently, it's available only in .png format.
But let's talk about how this changes the workflow:
1. Elevates presentations: Forget about boring slides. Now you can showcase the entire thought process in one image.
2. Remote work made painless: Send colleagues an image of the board, and they'll instantly grasp the context, even without access to Microboard.
3. Project documentation: One snapshot of the board tells more than 100 pages of text.
4. Creative brainstorming: Print out the board and work with it offline. Yes, sometimes old methods + new technologies = magic.
When we began developing the board export tool, we didn't anticipate the challenges ahead. The goal was clear: provide users with the ability to select an area and export it as an image. However, what seemed like a simple idea quickly turned into a complex task.
Firstly, we needed to create a selection interface. We opted for a movable and resizable rectangle. We added handles to resize the rectangle, allowing users to adjust its size by dragging the corners. This required monitoring mouse position and implementing corner detection algorithms.
We also added decorative elements to each corner to make the interface more intuitive. While adding borders to corners on a regular website might take 5 lines of code, our algorithm required about 100 lines.
The actual export process was less complex: setting the camera position to capture the desired area, rendering each element within the selected region, and converting the Canvas into an image.
And now, we have a powerful and intuitively understandable board export tool ready to go. Underneath the hood, there's complex logic, but for the user, it's simple and natural.