How to export images from charts?
Published: 2024-04-27 07:39:41

## Title

Is there an api for exporting pictures from charts?

## Description

Can charts be directly converted into high definition images and saved? Is there a relevant API?
<br>

## Solution

You have two ways to save a chart as an image:
Right-click directly on the chart to save or copy
![](https://bytedance.larkoffice.com/space/api/box/stream/download/asynccode/?code=YjAyNzA4Y2ZmNTFmMjcxNjM3MDAyYmQwOTMyYWE2M2JfTzBhMzVRbmV6ZlBrR0RqM0FWNmduWElLdWYybmtDaDlfVG9rZW46UTM3V2JOdUppb1FISHB4N2taY2NrZ1RWbmJjXzE3MTQyMDM0ODE6MTcxNDIwNzA4MV9WNA)

2. If you need to get pictures in a software project, we have different interfaces for different code environments
	

### **getDataURL**

<br>

**asynchronous method**Returns a data URI that contains the image display.
<br>

```TypeScript
getDataURL: () => Promise<any>;
```

<br>

### **exportImg**

<br>

**asynchronous method** Export chart images, only support browser side, and parameters at the same time `name` Pictures can be named.
<br>

```TypeScript
/**
 * **Asynchronous method** Export chart pictures, only supports browser side.
 * @param name the saved image name
 * @returns
 */
exportImg: (name?: string) => Promise<void>;
```

<br>

### **exportCanvas**

<br>

Exporting canvas with chart content is only supported on the browser side. You can use this canvas for secondary processing, such as adding watermarks, etc.
<br>

```TypeScript
/**
 * Export the canvas with the chart content drawn
 * @returns HTMLCanvasElement
 * @since 1.5.2
 */
exportCanvas: () => HTMLCanvasElement | undefined;
```

<br>

### **getImageBuffer**

<br>

Currently only the node environment is supported for node-side image export.
<br>

```TypeScript
 getImageBuffer: () => void;
```

## Code Example

```Markdown
const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: 16
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  },
  xField: 'time',
  yField: 'value'
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// After waiting for the animation to execute or after closing the animation, exportImg
setTimeout(() => {
  vchart.exportImg('vchart')
}, 1000)

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
```

## Results

Online demo：https://codesandbox.io/p/sandbox/exportimg-2zvg62?file=%2Fsrc%2Findex.ts%3A58%2C26
![](https://bytedance.larkoffice.com/space/api/box/stream/download/asynccode/?code=OTMzNWQ1Mjg5ZTJjZGQ0YTM5ODBmYTk0MmM1YTVkZTNfcExPQkJ6ZW50M0FiUFNmYXJHbUc3amppOFgybnVEMG9fVG9rZW46VUhxcWJ4MTZOb3dLc214M0p1amNBdFMzbmZiXzE3MTQyMDM0ODE6MTcxNDIwNzA4MV9WNA)
<br>

## Related Documentation

Related api：https://www.visactor.io/vchart/api/API/vchart
github：https://github.com/VisActor/VChart
<br>

<br>