javascript - Highcharts - 导出到 base64

Question

有没有办法获取一个 highcharts 图表，并获得它的 base64 表示？

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

Answer 1

这是我解决它的方法：

• 使用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)
  

更新

获取 highcharts SVG

• 使用chart.getSVG()方法

Highcharts API

jsFiddle 示例

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

Answer 2

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

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

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

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

享受和好运！

Answer 3

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

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);})