Highcharts - 导出到base64

Question

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

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

Answer 1

这是我如何解决这个问题：

• 使用google canvg 它需要一个URL到SVG文件或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) ; 
  

• 将此字符串转换为字节a rray做

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

UPDATE

得到highcharts SVG

• 使用chart.getSVG()方法

Highcharts API

jsFiddle Example

• 或者干脆用$(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

享受和祝你好运！