SVG, PNG and JPG export

If you are using a shape library to render the nodes in your UI, from version 6.6.0 onwards you can now export your Surface to SVG, PNG or JPG.

There are two approaches - use the Toolkit's export helper UI, or use the low level programmatic API.

Export helper UI

The export helper UI provides a simple interface to allow your users to export the contents of a surface to an SVG file. to invoke the SVG export UI for the surface shown below.

SVG Export

The code to invoke the SVG exporter UI is:

import { SVGExporterUI } from "@jsplumbtoolkit/browser-ui"

new SVGExporterUI(surface).export()

You can using this code:

import { ImageExporterUI } from "@jsplumbtoolkit/browser-ui"

new ImageExporterUI(surface).export()

And you can using this code:

import { ImageExporterUI } from "@jsplumbtoolkit/browser-ui"

new ImageExporterUI(surface).export({type:"image/jpeg"})

CSS classes

The export helper UI can be customized via a few different CSS classes:

Class	Description
jtk-export-underlay	Assigned to the element that acts as an underlay for the export preview
jtk-export-overlay	Assigned to the element presents the export preview
jtk-export-cancel	Assigned to the 'X' button on the export preview window

Additionally, you can target the canvas into which the preview painted via .jtk-export-overlay canvas, and you can target the 'download' link via .jtk-export-overlay a.

Setting PNG/JPG export size

When exporting a PNG or JPG you can provide a desired width or height for the exported image:

import { ImageExporterUI } from "@jsplumbtoolkit/browser-ui"

const surface = ....

new ImageExporterUI(surface).export({width:3000})

Export PNGExport JPG

If you click an export link above you'll get an image with width 3000 pixels. You can also specify height instead of width if you prefer, but if you specify height and width we'll only use the width you provide - the exporter always maintains the aspect ratio of the original image.

Specifying a set of exportable dimensions

If you'd like your users to be able to pick the dimensions of their exported image you can also do that:

import { ImageExporterUI } from "@jsplumbtoolkit/browser-ui"

const surface = ....

new ImageExporterUI(surface).export({
    dimensions:[
        { width:3000 },
        { width:1200 },
        { width:800 }
    ]
})

The entries in dimensions can have either width or height, but if you supply both we will, as discussed above, only honour the width. When you click an export link in the next code demo, you'll see a dropdown from which you can pick the size of the export:

Export PNGExport JPG

---

Programmatic export

The various methods shown above are wrappers around a lower level API that you can use instead if you wish to.

SVG export

To export an SVG programmatically:

import { SVGExporter } from "@jsplumbtoolkit/browser-ui"

const exporter = new SVGExporter(surface)
const result = exporter.export({ options })

options is of type SVGExportOptions:

Home > @jsplumbtoolkit/browser-ui > SvgExportOptions

SvgExportOptions interface

Options for SVG export.

Signature:

export interface SvgExportOptions 

Properties

Property	Modifiers	Type	Description
defaultSize?		Size	(Optional) Default size to use for nodes if their data does not have width/height properties.
fill?		string	(Optional) Default fill color to use for vertices. Will be overridden by individual fill values in each node. Default value is white.
labelAttribute?		string	(Optional) If showing labels, the name of the property in each node that defines the label. Defaults to label.
labelColor?		string	(Optional) If showing labels, the default color to use. Will be overridden by individual textColor values in each node. Default value is black.
labelStrokeWidth?		string	(Optional) If showing labels, the stroke width to use when rendering them. Defaults to 0.25px.
margins?		PointXY	(Optional) Optional whitespace to place around the export. Defaults to 50px in x and y.
outline?		string	(Optional) Default outline color to use for vertices. Will be overridden by individual outline values in each node. Default value is black.
showLabels?		boolean	(Optional) Whether or not to display labels (using an SVG text element) on nodes. Defaults to false.
strokeWidth?		number	(Optional) Default stroke width to use for nodes. Will be overridden by individual outlineWidth values in each node. Default value is 2.

Image export

To export an image programmatically you have to provide options for the export, as well as a function for the Toolkit to invoke once the image is ready:

import { ImageExporter } from "@jsplumbtoolkit/browser-ui"

const exporter = new ImageExporter(surface)
const result = exporter.export({ options }, onready:(r:ImageReadyFunction) => {
    
})

options is of type ImageExportOptions:

Home > @jsplumbtoolkit/browser-ui > ImageExportOptions

ImageExportOptions interface

Options for an image export.

Signature:

export interface ImageExportOptions extends SvgExportOptions 

Extends: SvgExportOptions

Properties

Property	Modifiers	Type	Description
height?		number	(Optional) Optional height for the export. The exported image's aspect ratio will always be honoured so if you provide both this and width, this will be ignored. If you don't provide this the natural height of the underlying SVG will be used.
quality?		number	(Optional) Optional quality of the resulting image - only used for jpeg. Defaults to 1.0.
type?		string	(Optional) Content type for the export. Defaults to image/png. Most modern browsers also support image/jpeg.
width?		number	(Optional) Optional width for the export. The exported image's aspect ratio will always be honoured so if you provide both this and height, height will be ignored. If you don't provide this the natural width of the underlying SVG will be used.