如何将高图转换为二进制图像 [英] How to convert highchart to binary image

问题描述

HTML：

 
 
 < highchart id =chartclass =plotchartCntrconfig =chart>< / highchart> 
  

JS：

  $ scope.chart = {
 options：{
 chart：{
 type：'column'
} 
}，
 xAxis ：{
 categories：[] //在搜索后动态加载
}，
 yAxis：{
 title：{
 text：'Counts'
} ，
标签：{
 formatter：function（）{
 return this.value 
} 
} 
}，
 tooltip：{
十字线：true，
共享：true 
}，
 series：[] //搜索后动态加载
} 
  

我必须将其保存为图片。

我的代码（从堆栈溢出中获得）：

  var canvas = document.createElement（chart）; 
 canvas.width = 200; 
 canvas.height = 500; 
 var ctx = canvas.getContext（2d）; 
 ctx.drawImage（img，0，0）; 
 var dataURL = canvas.toDataURL（image / png）; 
 console.log（dataURL）; 
  

但是我收到错误 canvas.getContext不是函数。

请提出建议

解决方案

最后，我得到了答案：

HTML：

 < img id =mock/> 
  

JS：

  var svg = document.getElementById（'chart'）。children [0] .innerHTML; 
 // svg = chart.getSVG（）; 
 
 var base_image = new Image（）; 
 svg =data：image / svg + xml，+ svg; 
 base_image.src = svg; 
 $（'＃mock'）。attr（'src'，svg）; 
  

我们也可以将图片标签直接保存在数据库中。参考。 将高图保存为二进制图像。

I'am using highchart for plotting a graph with angular:

HTML:

<highchart id="chart" class="plotchartCntr" config="chart"></highchart>

JS:

$scope.chart = {
    options: {
        chart: {
            type: 'column'
        }
    },
    xAxis: {
        categories: [] // dynamically loaded after search
    },
    yAxis: {
        title: {
            text: 'Counts'
        },
        labels: {
            formatter: function() {
                return this.value
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    series: [] // dynamically loaded after search
}

I have to save this as a image.

My code (got from stack overflow):

var canvas = document.createElement("chart");
canvas.width = 200;
canvas.height = 500;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);

But I am getting error canvas.getContext is not a function.

Please suggest

解决方案

Thanks, at last I got the answer:

HTML:

<img id="mock" />

JS:

var svg = document.getElementById('chart').children[0].innerHTML;
//svg = chart.getSVG(); 

var base_image = new Image();
svg = "data:image/svg+xml," + svg;
base_image.src = svg;
$('#mock').attr('src', svg);

We can save image tag directly in DB also. Ref. Save highchart to binary image.

这篇关于如何将高图转换为二进制图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！