Skip to main content

Release 6.8.1

· 3 min read
Simon Porritt

NEW FUNCTIONALITY​

  • The ImageExporter class now supports an optional width or height for the exported image. Width takes precedence; the aspect ratio of the underlying content is always maintained.

  • Added optional onShow and onDimensionsChanged callbacks to ImageExporterUI.

  • Added the ability to ImageExporterUI to specify a list of sizes from which the user should be able to choose for their exported image.

Specifying image export size​

You can now programmatically specify the width or height of a PNG or JPG image export, either as an argument to the low-level ImageExporter class, or to the ImageExporterUI.

Here, we've updated our demo from the 6.8.0 release notes to include support for exporting PNG and JPG images. When you export an image from this example it will be exported at the size of the content bounds:

Export PNGExport JPG

We do this via:

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

const surface = ....

new ImageExporterUI(surface).export()

You're not limited to the size of the content when exporting a PNG or JPG, though - 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:

choosing png or jpg export size for diagram export - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Export PNGExport JPG

Further reading​

You can read up on this in our documentation - https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/svg-png-jpg-export.

Start a free trial

Sending your evaluation request...

Interested in the concepts discussed in this article? Start a free trial and see how jsPlumb can help bring your ideas to market in record time.

Get in touch!​

If you'd like to discuss any of the ideas/concepts in this article we'd love to hear from you - drop us a line at hello@jsplumbtoolkit.com.