问题 Highcharts - 出口到base64


有没有办法获取高图图表,并获得它的base64表示?

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


12862
2017-07-17 20:47


起源

好问题投票 - Mina Gabriel


答案:


这是我如何解决它:

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

UPDATE

得到highcharts SVG

  • 使用 chart.getSVG() 方法

Highcharts API

jsFiddle示例

  • 或者只是使用 $(your svg).html()

9
2017-07-18 12:50



这看起来很有希望 - 您是否碰巧知道如何获得高图表的SVG? - Adam Rackis
@Adam Rackis查看更新 - Mina Gabriel
的确 - 谢谢。我稍后会回到这一点 - 我认为这可能会奏效。 - Adam Rackis
老兄 - 这是一个出色的答案。谢谢! - Adam Rackis
我非常感谢这个答案,米娜。非常感谢。 - Vael Victus


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

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

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

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

享受,祝你好运!


3
2017-07-17 20:50



这是第二步 - 获得二进制内容 - 我预计这是最困难的。你有关于如何从highcharts做到这一点的任何信息? - Adam Rackis
答案已更新。 - Daniel Li
太棒了 - 感谢您的更新 - Adam Rackis
第一个链接坏了 - golimar
一些链接: api.highcharts.com/highcharts/exporting  highcharts.com/docs/export-module/export-module-overview  highcharts.com/docs/export-module/client-side-export - lil_solbs