本文概述
- highchartsSVGtoImage
- highchartsCustomSVGtoImage
- nativeSVGtoImage
在你的文档中包含以下代码(另存为文件或将其包含在脚本标签中), 然后选择最适合你需要的方法。
注意:给定的代码假定你已经链接到文档jQuery(可选, 可以使用纯JavaScript选择器更改选择器)和Highcharts_export.js(给定方法中的2个必需), 可以在此处下载。该代码旨在帮助你生成具有Highchart或本地svg到图像的图像, 这意味着你可以根据需要修改或共享代码。
/*** Highcharts exportation functions* @author Our Code World*/ (function(window){function ExportInitializator(){var exp = {};
var EXPORT_WIDTH = 1000;
// Exportation width/*** This method requires the highcharts_export.js file */exp.highchartsSVGtoImage = function(chart, callback) {var svg = chart.highcharts().getSVG();
var canvas = document.createElement('canvas');
canvas.width = chart.width();
canvas.height = chart.height();
var ctx = canvas.getContext('2d');
var img = document.createElement('img');
img.onload = function() {ctx.drawImage(img, 0, 0);
callback(canvas.toDataURL('image/png'));
};
img.setAttribute('src', 'data:image/svg+xml;
base64, ' + btoa(unescape(encodeURIComponent(svg))));
};
/*** This method requires the highcharts_export.js file */exp.highchartsCustomSVGtoImage = function(chart, callback){if(!chart){console.error("No chart given ");
}var render_width = EXPORT_WIDTH;
var render_height = render_width * chart.chartHeight / chart.chartWidth;
var svg = chart.getSVG({exporting: {sourceWidth: chart.chartWidth, sourceHeight: chart.chartHeight}});
var canvas = document.createElement('canvas');
canvas.height = render_height;
canvas.width = render_width;
var image = new Image();
image.src = 'data:image/svg+xml;
base64, ' + btoa(unescape(encodeURIComponent(svg)));
console.log(image);
image.addEventListener('load', function() {console.log(chart);
canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height);
callback(canvas.toDataURL('image/png'));
}, false);
image.src = 'data:image/svg+xml;
base64, ' + window.btoa(svg);
};
/*** This method requires the highcharts_export.js file */exp.nativeSVGtoImage = function(DOMObject, callback, format){if(!DOMObject.nodeName){throw new error("Se requiere un objeto DOM de tipo SVG. Obtener con document.getElementById o un selector de jQuery $(contenedor).find('svg')[0]");
}var svgData = http://www.srcmini.com/new XMLSerializer().serializeToString(DOMObject);
var canvas = document.createElement("canvas");
canvas.width = $(DOMObject).width();
canvas.height = $(DOMObject).height();
var ctx = canvas.getContext( "2d" );
var img = document.createElement("img");
img.setAttribute( "src", "data:image/svg+xml;
base64, " + btoa(unescape(encodeURIComponent(svgData))) );
img.onload = function() {ctx.drawImage( img, 0, 0 );
if(format === "jpeg" || format === "jpg"){callback(canvas.toDataURL("image/jpeg"));
}else{callback(canvas.toDataURL("image/png"));
}};
return true;
};
return exp;
}if(typeof(highchartsExport) === 'undefined'){window.highchartsExport = new ExportInitializator();
}})(window);
highchartsSVGtoImage此方法需要一个highcharts(或包含highchart的变量)的jQuery选择器, 并从中调用方法getSVG。创建一个图像, 其源将是先前的svg结果, 然后创建一个画布并在其上绘制先前的图像, 我们可以从该画布生成base64图像。 (此图片的尺寸与svg容器相同)
注意:此函数不是同步的, 因此, 第二个参数期望是一个函数(将第一个参数作为base64 uri接收)。
用法
highchartsExport.highchartsSVGtoImage($("#myChartContainer"), function(uri){window.open(uri);
});
highchartsCustomSVGtoImage此方法需要一个highcharts的jQuery选择器来调用该函数, 然后从中调用方法getSVG。创建一个图像并将其源作为前一个svg结果, 然后创建一个画布并在其上绘制前一个图像, 我们可以从该画布生成base64图像。(该图像的宽度将是在脚本顶部声明的自定义属性” EXPORT_WIDTH” , 将执行以下操作:render_width * chart.chartHeight / chart.chartWidth)
注意:此函数不是同步的, 因此, 第二个参数期望是一个函数(将第一个参数作为base64 uri接收)。
用法
highchartsExport.highchartsCustomSVGtoImage($("#myChartContainer").highcharts(), function(uri){window.open(uri);
});
nativeSVGtoImage【使用javascript将highcharts图表导出为图像的3种方法(客户端解决方案)】此方法需要本地SVG dom对象。创建一个图像, 其源将是先前的svg结果(由XMLSerializer解释), 然后创建一个画布, 并在其上绘制先前的图像, 我们可以从该画布生成base64图像。
注意:此函数不是同步的, 因此, 第二个参数期望是一个函数(将第一个参数作为base64 uri接收)。
用法
highchartsExport.nativeSVGtoImage($("#myChartContainer").find("svg")[0], function(uri){window.open(uri);
}, 'png');
你是否有更多方法可以在本地导出高价图表?在此处的评论框中与我们分享。
推荐阅读
- 如何创建自己的JavaScript库
- 如何在ReactJS中创建同步和异步自动完成输入
- 如何在Django中返回JSON响应
- 如何在ReactJS中使用Bootstrap 3的组件
- 如何将Markdown渲染为纯React组件
- React Native –为什么它是移动应用程序开发的最佳选择()
- 如何使用CSS创建响应表
- 如何使用CSS将reCAPTCHA元素居中
- 如何高效优雅地管理接口文档