Highcharts - 输出到base64 [英] Highcharts - export to base64

问题描述

换句话说，相当于首先将它导出到PNG，或者将它导出到PNG或JPG（我不介意哪个），然后获取该图像的base64字符串。

解决方案

这是我如何解决它：使用 $ b

• noreferrer> google canvg
  它需要一个URL到SVG文件或SVG文件的文本，用JavaScript解析它，然后将结果呈现在Canvas元素上。




• 使用
  $ b

    canvg（document.getElementById（'画布），getSVG（））; 
    




• 将画布中的内容转换为图像
  
  

    var canvas = document.getElementById（canvas）; 
   var img = canvas.toDataURL（image / png）; // img是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）
    

更新
$ b 获取highcharts SVG

• 使用 chart.getSVG（）方法

Highcharts API

jsFiddle示例

• 或简单地使用 $（您的svg）.html（）

Is there a way to take a highcharts graph, and get a base64 representation of the it?

In other words, the equivalent of first exporting it to PNG or JPG (I don't care which) and then getting a base64 string of that image.

解决方案

here is how i solve it :

• use google canvg It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element.

• render your chart svg to the canvas using

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

• convert what you have in the canvas to image

    var canvas = document.getElementById("canvas") ; 
    var img = canvas.toDataURL("image/png"); //img is data:image/png;base64
     img = img.replace('data:image/png;base64,', '');
  

• render your image to a hidden field

    $("hidden field").val(img) ;
  

• to convert this string to byte array do

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

UPDATE

get the highcharts SVG

• use the chart.getSVG() method

Highcharts API

jsFiddle Example

• or simply use $(your svg).html()

这篇关于Highcharts - 输出到base64的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！