Export Image

4 min read

graph.downloadFullImage(name, type, imageConfig)

Export the whole graph as an image, whatever (a part of) the graph is out of the screen.

Parameters

NameTypeRequiredDescription
nameStringfalseThe name of the image. 'graph' by default.
type'image/png' / 'image/jpeg' / 'image/webp' / 'image/bmp'falseThe type of the image. When the renderer of the graph is 'canvas'(default), type takes effect. When the renderer is 'svg', toFullDataURL will export a svg file
imageConfigObjectfalseThe configuration for the exported image, detials are shown below

where the imageConfig is the configuration for exported image:

NameTypeRequiredDescription
backgroundColorStringfalseThe background color of the image. If it is not assigned, the background will be transparent.
paddingNumber / Number[]falseThe top, right, bottom, right paddings of the exported image. When its type is number, the paddings around the graph are the same

Usage

graph.downloadFullImage('tree-graph', {
  backgroundColor: '#ddd',
  padding: [30, 15, 15, 15],
});

graph.downloadImage(name, type, backgroundColor)

Export the canvas as an image.

Parameters

NameTypeRequiredDescription
nameStringfalseThe name of the image. 'graph' by default
type'image/png' / 'image/jpeg' / 'image/webp' / 'image/bmp'falseThe type of the image. When the renderer of the graph is 'canvas'(default), type takes effect. When the renderer is 'svg', toFullDataURL will export a svg file
backgroundColorStringfalseThe background color of the image. If it is not assigned, the background will be transparent.

Usage

graph.downloadImage();

graph.toDataURL(type, backgroundColor)

Generate url of the image of the graph inside the view port.

Parameters

NameTypeRequiredDescription
type'image/png' / 'image/jpeg' / 'image/webp' / 'image/bmp'falseThe type of the image. When the renderer of the graph is 'canvas'(default), type takes effect. When the renderer is 'svg', toFullDataURL will export a svg file
backgroundColorStringfalseThe background color of the image. If it is not assigned, the background will be transparent.

Return

  • Type of the return value: string;
  • The return value is the image url.

Usage

const dataURL = graph.toDataURL();

graph.toFullDataURL(callback, type, backgroundColor)

Generate url of the image of the whole graph including the part out of the view port.

Parameters

NameTypeRequiredDescription
callbackFunctiontrueThe callback function after finish generating the dataUrl of the full graph
Asynchronously
type'image/png' / 'image/jpeg' / 'image/webp' / 'image/bmp'falseThe type of the image. When the renderer of the graph is 'canvas'(default), type takes effect. When the renderer is 'svg', toFullDataURL will export a svg file
imageConfigObjectfalseThe configuration for the exported image, detials are shown below

where the imageConfig is the configuration for exported image:

NameTypeRequiredDescription
backgroundColorStringfalseThe background color of the image. If it is not assigned, the background will be transparent.
paddingNumber / Number[]falseThe top, right, bottom, right paddings of the exported image. When its type is number, the paddings around the graph are the same

No return value, you can process the result in the callback function as shown below:

Usage

graph.toFullDataUrl(
  // The first parameter: callback, required
  (res) => {
    // ... something
    console.log(res); // e.g. print the result
  },
  // The second and third parameter is not required
  'image/jpeg',
  (imageConfig: {
    backgroundColor: '#fff',
    padding: 10,
  }),
);