Download as PNG / SVG / etc - Githubissues

techniq / layerchart

Composable Svelte chart components to build a wide range of visualizations

https://www.layerchart.com

MIT License

451 stars 10 forks source link

Download as PNG / SVG / etc #162

Open techniq opened 1 month ago

techniq commented 1 month ago

Mixing rendering contexts (<Svg>, <Canvas>, etc) will make some options more difficult / impossible
Download as PNG
- If using only <Canvas>, should be able to use:
- canvas.toDataURL()
- canvas.toBlob()
- see also: https://stackoverflow.com/questions/11112321/how-to-save-canvas-as-png-image
- html2canvas
- https://dev.to/bibekkakati/take-screenshot-of-html-element-using-javascript-13b7
- Possible use navigator.mediaDevices.getDisplayMedia() (will prompt)
- https://stackoverflow.com/questions/49605681/are-there-any-browser-provided-apis-to-capture-a-screenshot-of-the-dom-of-a-page
- https://github.com/w3c/mediacapture-screen-share/issues/105
- https://github.com/w3c/mediacapture-screen-share/issues/107
Leverage puppeteer (backend, round trip)
Download as SVG
- If using only <Svg>, should be able to use:
- new XMLSerializer().serializeToString(svg)
- see also: https://stackoverflow.com/questions/28226677/save-inline-svg-as-jpeg-png-svg

techniq commented 1 month ago

SVG reproduction when using CSS classes / variables will require some extra processing to fully reproduce visual.

techniq commented 1 month ago

Mike Bostock's examples of serialize() and rasterize() for SVG look straight forward (using document.createTreeWalker().

Likely how Download SVG and Download PNG are implemented (or at least the basics).

see also: https://talk.observablehq.com/t/svg-to-png/6957

techniq commented 1 week ago

See discussion for approach with SVG