javascript - Highcharts - 导出到 base64

Question

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

换句话说，相当于先将其导出为 PNG 或 JPG(我不关心是哪个)，然后获取该图像的 base64 字符串。

Answer 1

我是这样解决的:

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

• 使用

  将图表 svg 渲染到 Canvas

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

• 将 Canvas 中的内容转换为图像

    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 Example

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