[FEAT] Export a screenshot of the selected element

[drfarrell]

Exporting elements in a browser as screenshots opens up a lot of really cool adjacent features such as attaching images to Onlook PRs, asset generation for documentation, and making it so much easier to render realistic images of the product for other creatives.

Filetypes

• Webp
• PNG
• JPG
• SVG <-- Perhaps the hardest to get right, but would be amazing for designers.

Functionality

• Export to clipboard (so when a user "pastes" they paste the image)
• Save as a file

[lcrojano]

I could work on this; this would be my approach

1. Capturing Screenshots in the Browser: use the html2canvas and canvg
2. Export to Filetypes: Convert the canvas to different image formats using the canvas.toDataURL() method.
3. Export to Clipboard: Using the Clipboard API to allow users to copy the image to the clipboard after capturing.

[drfarrell]

That was what I was probably going to try out – while you work on that, let me provide some mockups of where I'd expect the user to be able to interact with this...

I'm imagining they can do this from the right-click menu and the bottom part of the properties panel like what Figma has

The right-click menu where I'd imagine a "export as png" button would go (or we could make it a menu item that expands to the right for the filetype)

The lower right of our properties panel:

What Figma has:

If you have questions don't hesitate to reach out or feel free to jump in to discord

[Kitenite]

@lcrojano , That sounds reasonable. One thing with html2canvas is that the library would need to be injected into the tag which can be difficult. 2 extra suggestions to consider:

1. Electron has a screenshot API and we have the dimensions of the element on the page. It could be cut from the screenshot
2. We get the style from the element so could potentially pull it into the app from the and use html2canvas there.

[drfarrell]

@lcrojano did you happen to give this a try? I'm super excited to see what you come up with!