[feature] Copy/Share as PNG

[rjt-rockx]

An option to copy/share the selection or the canvas as PNG would be super helpful.
Currently, I get by with taking screenshots and cropping them, but the cropping step can be bypassed altogether with this option.

Additionally, there could be an option in the menu to export the entire canvas as PNG, however, due to the infinite nature of the canvas, there might be certain limitations that'd need to be put in place for the size of the exported image.

[steveruizok]

Good call @rjt-rockx. I've thought about screenshots in three ways:

• A "save viewport to png"
• A "save canvas to png"

The only difficulty here is how to generate the png itself. There are browser APIs for this but they're rather inconsistent. There are libraries, such as html2canvas, however these are pretty large (around 50% the size of tldraw itself) and so would need to be loaded in asynchronously rather than distributed with the tldraw package.

Alternatively, we could create the screenshot on the server by sending the document and screenshot dimensions to the server, rendering it there, taking the screenshot with software like puppeteer, and then responding with the image. I've previously used this method for generating social images for globs.design (see here).

To go back to the screenshot UX, I've also considered "frames" for screenshots.

This would be something sort of new and experimental, so I'm not as sure about the UX for a frame. The rough idea would be that the frame could be drawn on the screen and repositioned just like any other shape, but could be used to export all of the shapes that contact it. In a rough sense for SVGs, this would mean finding all other shapes that are contained by the frame or that collide with it, and copying those shapes into an SVG with a size and viewbox based on the frame's dimensions.

This would personally be more useful because I wouldn't need to worry about the camera position or viewport dimensions, which I currently have to be careful about when taking screenshots. And since the shapes would not have a parent-child relationship (like frames in an app like Figma) then they would have less of an effect on the drawing itself.

[seflless]

@rjt-rockx there I'm doing experiments in this vein but focus on SVGs, just so you are aware:
tldraw/tldraw#307

[FarazzShaikh]

@seflless Are you still working on this?

@steveruizok Id like to get started on the Puppeteer based image export option. Can you assign this to me?

[steveruizok]

Go for it!

This would have to be done via an endpoint on the www site. (The library could have an async onExport callback but shouldn't not include the libraries themselves, which are quite large!

[FarazzShaikh]

Yep! I will add the endpoint to apps/www

For the UX, just to get started I am going to have it be the way figma does it, i.e. Export selected shapes and the image dimensions will be based on the combined bounding box. I will make it as modular as possible so we can switch out to using frames like you descried in the future