由于以下问题,我对这些解决方案都不满意:
- 我的刻度标签不在画布上
- 我的轴标签不在画布上
- 使用canvas2image在Firefox中保存图像对于普通用户来说很困惑
我的解决方案是更改图表的选项,使其重新绘制为仅canvas图表,然后使用canvas-to-blob将此图表转换为blob,然后使用FileSaver将blob保存给用户,最后在保存图像后重新绘制图表。
需要以下JS插件:
代码:
$('a.download_as_img').click(function(e){
e.preventDefault();
saveAsImage(graph_selector, data, options, xaxis,yaxis)
})
function saveAsImage(graph_selector, data_arr, options, xaxis, yaxis){
var canvas = replotChartAsCanvas(graph_selector, data_arr, options, xaxis, yaxis);
var title = 'chart';
canvas.toBlob(function(blob) {
saveAs(blob, title + ".png");
});
var plot = $.plot(graph_selector, data_arr, options);
}
function replotChartAsCanvas(graph_selector, data_arr, options, xaxis, yaxis){
var canvas_options = {
canvas: true,
axisLabels: {
show: true
},
xaxes: [
{
axisLabelUseCanvas: true,
axisLabel: xaxis
}
],
yaxes: [
{
axisLabelUseCanvas: true,
position: 'left',
axisLabel: yaxis
}
]
}
var merged_opts = {}
$.extend(merged_opts, options, canvas_options);
var plot = $.plot(graph_selector, data_arr, merged_opts);
return plot.getCanvas();
}
也许如果您对上述解决方案有类似的担忧,您可以尝试这个。