javascript - 如何将highchart转换为二进制图像

Question

我正在使用 highchart 绘制带有角度的图形：

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
}

我必须将其保存为图像。

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

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 is not a function。

请建议

Answer 1

谢谢，终于得到了答案：

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);

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

Answer 2

 var canvas = document.createElement("chart");

替换为：

var canvas = document.getElementById("chart");