關鍵步驟:html
1.獲取svg,並轉化爲base64編碼;canvas
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轉爲圖片並下載;svg
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);