css-doodle

`export([options])`

Export the doodle as an SVG, or as a PNG at any scale. Returns a promise.

Syntax

await doodle.export([{ scale, detail, download, name }])

scale: Multiplier for the PNG size, relative to the rendered size. Default 1.
detail: When true, also render the PNG and include its blob and data URL in the result.
download: When true, render the PNG and trigger a download.
name: File name for the download, without the .png extension. Defaults to a timestamp.

The result is { width, height, svg }: the SVG markup wraps the doodle's DOM and styles in a foreignObject, with custom properties inherited from the page and Google fonts embedded. With detail or download it also has blob, the PNG, and source, the SVG as a data URL.

Examples

const doodle = document.querySelector('css-doodle');

// download a PNG at 4x resolution
await doodle.export({
  scale: 4,
  download: true,
  name: 'my-doodle'
});

// get the PNG as a blob
const { blob, width, height } = await doodle.export({ detail: true });

// or just the SVG markup
const { svg } = await doodle.export();

See also