I have created a react app Which is very similar to office whiteboard. I would like to generate a thumbnail or card preview of each whiteboard and wondering how to go about it.
My initial thought was to just create a card component and render the shapes to that the same way I do for the real whiteboard. However, the points for each shape will be outside the stage and I can't think of how I can scale it down.
Any ideas?
Take a look at the official canvas thumbnail demo from Konva.
You can use a similar approach with react-konva.
I think this approach will work better and probably more performant (depending on your app). You just need to create another Stage and draw all objects into it. It will be better if you can draw simplified versions of the shape, because the drawing is much smaller, so not all details are visible.
You will have to calculate your own scale ratio.
Instead of making a full components tree for the whiteboard, you can just export the main stage into an image and show it. You have to do reexport from time to time.
