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

享受和祝你好運！