highchart不依赖插件的图表导出

关键步骤：

1.获取svg，并转化为base64编码；

var svg = $(‘.highcharts-container‘).html();var image = new Image();//将svg通过base64编码转为图片对象image.src = ‘data:image/svg+xml;base64,‘ + window.btoa(unescape(encodeURIComponent(svg)));

2.通过canvas转为图片并下载；

var context = canvas.getContext(‘2d‘);  //取得画布的2d绘图上下文context.drawImage(image, 0, 0);

var a = document.createElement(‘a‘);a.href = canvas.toDataURL(‘image/png‘);  //将画布内的信息导出为png图片数据a.download = "MapByMathArtSys";  //设定下载名称

注：图片图标在图表中仍然是原格式，所以不会被转化。需要单独在canvas中绘制；eg:

var icon = new Image();icon.src=$(".highcharts-container svg image").attr("href");//计算图标的位置var icon_x=parseFloat($(".highcharts-container svg image").attr("x"))+parseFloat($(".highcharts-plot-background").attr("x"))-parseFloat(icon.width)/2;var icon_y=parseFloat($(".highcharts-container svg image").attr("y"))+parseFloat($(".highcharts-plot-background").attr("y"))-parseFloat(icon.height)/2;

context.drawImage(icon, icon_x, icon_y);