Download as PNG / SVG / etc

[techniq]

• 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
  • html-to-image
  • 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
  • Provide a means to select only part of a screen to capture w3c/mediacapture-screen-share#105
  • Screenshot (still image) capability  w3c/mediacapture-screen-share#107
  • https://observablehq.com/@fil/canvas-plot
  • https://observablehq.com/@jcolot/observable-plot-canvas
  • https://github.com/qq15725/modern-screenshot
• 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
• Upscaling Canvas
  • Maybe provide a dedicated DownloadCanvas or create a new Canvas offscreen with higher container width/height overridden
  • See some discussion

[techniq]

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

[techniq]

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]

See discussion for approach with SVG

function downloadSVG() {
    const svgEl = document.querySelector('.lc-layout-svg');
    if (svgEl) {
        svgEl?.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

        svgEl.querySelector('.svg_text')?.classList.remove('hidden');

        const svgString = new XMLSerializer().serializeToString(svgEl);

        const a = document.createElement('a');
        a.href = window.URL.createObjectURL(new Blob([svgString]));
        a.download = 'download.svg';
        a.click();

        a.remove();

        svgEl?.removeAttribute('xmlns');
        svgEl.querySelector('.svg_text')?.classList.add('hidden');
    }
};

[techniq]

See discussion for approach with Canvas

function downloadPNG() {
    const canvas = document.querySelector('.lc-layout-canvas') as HTMLCanvasElement;
    const ctx = canvas.getContext('2d');
    const dataUrl = ctx?.canvas.toDataURL('image/png', 1);

    const a = document.createElement('a');
    a.href = dataUrl;
    a.download = 'download.png';
    a.click();
    a.remove();
};

[meta-cretin]

save as svg and png looks good to me...

[techniq]

downloadImage() and downloadSvg() are coming in the next release, and are available for all examples ("Download as PNG" always shown, "Download as SVG" only displayed when using SVG layers)

https://techniq-state-refactor.layerchart.pages.dev/docs/utils/download

---

Examples:

PNG:

SVG: