Highcharts - export to base64

Highcharts - export to base64

本文关键字：base64 to export Highcharts      更新时间：2023-11-09

有没有一种方法可以获取一个高图，并获得它的base64表示？

换句话说，相当于先将其导出为PNG或JPG（我不在乎是哪一个），然后获得该图像的base64字符串。

以下是我解决它的方法：

  • 使用google canvg它获取SVG文件的URL或SVG文件的文本，用JavaScript对其进行解析，并在Canvas元素上呈现结果。

  • 使用将图表svg渲染到画布上

     canvg(document.getElementById('canvas'),getSVG());

  • 将画布中的内容转换为图像

      var canvas = document.getElementById("canvas") ; 
  var img = canvas.toDataURL("image/png"); //img is data:image/png;base64
   img = img.replace('data:image/png;base64,', '');

  • 将图像渲染到隐藏字段

      $("hidden field").val(img) ;

  • 要将此字符串转换为字节数组，请执行

     Dim imageFile() As Byte = Convert.FromBase64String(YOUR HIDDEN FIELD .Value)

更新

获取高级图SVG

  • 使用chart.getSVG()方法

高图表API

jsFiddle示例

  • 或者简单地使用$(your svg).html()

首先，请参阅有关导出文件的highcharts文档。这将为您提供所需图像URL的字符串。

导出：http://www.highcharts.com/ref/#exporting

使用HTTP请求（例如使用AJAX）获取文件二进制内容（jpg/png），并将其传输到base64编码库，如以下所示：

Base64：http://www.webtoolkit.info/javascript-base64.html

祝你好运！

您可以直接从http://export.highcharts.com通过在请求中传递所需参数。

let chartData = {
        infile: CHART_DATA,
        b64: true // Bool, set to true to get base64 back instead of binary.
        width: 600,
        constr : "Chart"
    }

您可以使用下面的代码段来获取base64

fetch("https://export.highcharts.com/", {
  "headers": {
    "content-type": "application/json",
  },
  "body": "{'"infile'":'"{''n    '''"xAxis'''": {''n        '''"categories'''": [''n            '''"Jan'''",''n            '''"Feb'''",''n            '''"Mar'''",''n            '''"Apr'''",''n            '''"May'''",''n            '''"Jun'''",''n            '''"Jul'''",''n            '''"Aug'''",''n            '''"Sep'''",''n            '''"Oct'''",''n            '''"Nov'''",''n            '''"Dec'''"''n        ]''n    },''n    '''"series'''": [''n        {''n            '''"data'''": [1,3,2,4],''n            '''"type'''": '''"line'''"''n        },''n        {''n            '''"data'''": [5,3,4,2],''n            '''"type'''":'''"line'''"''n        }''n    ]''n}''n'",'"width'":600,'"constr'":'"Chart'",'"b64'":true}",
  "method": "POST",
  "mode": "cors"
}).then(function(response) {
    // The response is a Response instance.
    return response.text();
  }).then(function(data) {
    console.log(data);  //  base64 data
  }).catch(function(err) { console.log(err);})

相关文章：