Highcharts-React 获取图表的Base64 PNG

Question

我希望将图表导出传递给特别需要 PNG 或 JPG 的组件 - 因此 SVG 很遗憾无法工作。

在其他 SO 答案的帮助下-我能够使用以下代码获得 SVG Base64：

let link = "data:image/svg+xml;base64," + btoa(this.lineChartRef.current.CHART.current.chart.getSVG());

有什么方法可以获取 PNG base64 格式吗？或者 React 中是否有一种有效的方法可以将此 SVG base64 转换为 PNG？

谢谢！！！

Answer 1

感谢@ppotaczek 转发 [this SO post][1]，我能够为 React 创建以下解决方案。希望它将来对其他人有所帮助！

//Start by calling the chart options (using refs) into a variable and JSON stringify 
let chartoptions = this.lineChartRef.current.BrokerChart.current.chart.userOptions
    chartoptions = JSON.stringify(chartoptions)

//Create a data body with the following parameters 
    let data = {
      options: chartoptions,
      filename: 'LineChart',
      async: true
    }

    let url = "https://export.highcharts.com/"
    let returnedimageurl = ""
    //setState will be called within the Axios return so "This" must 
    let self = this

    axios({
     method: 'post',
     url: 'https://export.highcharts.com/',
     data: data,
    })
    .then(function (response) {
      returnedimageurl= url +response.data
      self.setState({
        activityChartPng: url
      }, self.allowDownload())
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    }); 

//The activityChartPvg state can then be passed as props to the React-PDF component


  [1]:

Highcharts-React 获取图表的Base64 PNG

Highcharts-React Get Base64 PNG of chart

javascript

base64

highcharts

reactjs

react-pdf