使用phantomJs服务器端导出Echarts图片
来源:互联网 发布:c语言图形界面设计 编辑:程序博客网 时间:2024/05/19 07:41
背景:
在使用Echarts过程中,有需求在页面上图表显示和服务器端导出报表。在Echarts中,原生态提供了getImage()方法,但是都需要在页面上生成。事实上,可以通过页面上使用getImage()获得base64 encode的图片数据,传输至服务器端导出图片。但是在项目需求中,有一种场景在导出报表时,页面可能不需要生成图片。因此只能调研是否在服务器端直接生成。
思路:
phantomJs作为一个headless浏览器,支持网页截图。通过调用phantomJs,传入Echarts生成图表所需的options,与在页面上类似的方法,调用phantomJs的webpage模块,通过使用webpage.evaluate()在页面中生成div容器,调用echarts.init(container)生成图表,最终调用phantomJs的webpage.render()生成图片。
代码:
(function() {var system = require('system');var fs = require('fs');var config = {// define the location of js filesJQUERY : 'jquery.1.9.1.min.js',ESL : 'esl.js',ECHARTS : 'echarts-plain.js',// default container width and heightDEFAULT_WIDTH : '800',DEFAULT_HEIGHT : '400'}, parseParams, render, pick, usage;usage = function() {console.log("\nUsage: phantomjs echarts-convert.js -options options -outfile filename -width width -height height"+ "OR"+ "Usage: phantomjs echarts-convert.js -infile URL -outfile filename -width width -height height\n");};pick = function() {var args = arguments, i, arg, length = args.length;for (i = 0; i < length; i += 1) {arg = args[i];if (arg !== undefined && arg !== null && arg !== 'null' && arg != '0') {return arg;}}};parseParams = function() {var map = {}, i, key;if (system.args.length < 2) {usage();phantom.exit();}for (i = 0; i < system.args.length; i += 1) {if (system.args[i].charAt(0) === '-') {key = system.args[i].substr(1, i.length);if (key === 'infile') {// get string from file// force translate the key from infile to options.key = 'options';try {map[key] = fs.read(system.args[i + 1]).replace(/^\s+/, '');} catch (e) {console.log('Error: cannot find file, ' + system.args[i + 1]);phantom.exit();}} else {map[key] = system.args[i + 1];}}}return map;};render = function(params) {var page = require('webpage').create(), createChart;page.onConsoleMessage = function(msg) {console.log(msg);};page.onAlert = function(msg) {console.log(msg);};createChart = function(inputOption, width, height) {var counter = 0;function decrementImgCounter() {counter -= 1;if (counter < 1) {console.log(messages.imagesLoaded);}}function loadScript(varStr, codeStr) {var script = $('<script>').attr('type', 'text/javascript');script.html('var ' + varStr + ' = ' + codeStr);document.getElementsByTagName("head")[0].appendChild(script[0]);if (window[varStr] !== undefined) {console.log('Echarts.' + varStr + ' has been parsed');}}function loadImages() {var images = $('image'), i, img;if (images.length > 0) {counter = images.length;for (i = 0; i < images.length; i += 1) {img = new Image();img.onload = img.onerror = decrementImgCounter;img.src = images[i].getAttribute('href');}} else {console.log('The images have been loaded');}}// load opitonsif (inputOption != 'undefined') {// parse the optionsloadScript('options', inputOption);// disable the animationoptions.animation = false;}// we render the image, so we need set background to white.$(document.body).css('backgroundColor', 'white');var container = $("<div>").appendTo(document.body);container.attr('id', 'container');container.css({width : width,height : height});// render the chartvar myChart = echarts.init(container[0]);myChart.setOption(options);// load imagesloadImages();};// parse the paramspage.open("about:blank", function(status) {// inject the dependency jspage.injectJs(config.JQUERY);page.injectJs(config.ESL);page.injectJs(config.ECHARTS);var width = pick(params.width, config.DEFAULT_WIDTH);var height = pick(params.height, config.DEFAULT_HEIGHT);// create the chartpage.evaluate(createChart, params.options, width, height);// define the clip-rectanglepage.clipRect = {top : 0,left : 0,width : width,height : height};// render the imagepage.render(params.outfile);console.log('render complete:' + params.outfile);// exitphantom.exit();});};// get the argsvar params = parseParams();// validate the paramsif (params.options === undefined || params.options.length === 0) {console.log("ERROR: No options or infile found.");usage();phantom.exit();}// set the default out fileif (params.outfile === undefined) {var tmpDir = fs.workingDirectory + '/tmp';// exists tmpDir and is it writable?if (!fs.exists(tmpDir)) {try {fs.makeDirectory(tmpDir);} catch (e) {console.log('ERROR: Cannot make tmp directory');}}params.outfile = tmpDir + "/" + new Date().getTime() + ".png";}// render the imagerender(params);}());
使用方法:
1. phantomjs echarts-convert.js -options options -outfile filename -width width -height height
2. phantomjs echarts-convert.js -infile URL -outfile filename -width width -height height
例子:
options文件内容:{ title : { text: '世界人口总量', subtext: '数据来自网络' }, tooltip : { trigger: 'axis' }, legend: { data:['2011年', '2012年'] }, calculable : true, xAxis : [ { type : 'value', boundaryGap : [0, 0.01] } ], yAxis : [ { type : 'category', data : ['巴西','印尼','美国','印度','中国','世界人口(万)'] } ], series : [ { name:'2011年', type:'bar', data:[18203, 23489, 29034, 104970, 131744, 630230] }, { name:'2012年', type:'bar', data:[19325, 23438, 31000, 121594, 134141, 681807] } ]}命令行方法:bin/phantomjs echarts/echarts-convert.js -infile options -outfile test.png
导出图片:
0 0
- 使用phantomJs服务器端导出Echarts图片
- 使用phantomJs服务器端导出Echarts图片
- Highcharts使用phantomjs导出图片
- PHP使用phantomjs导出网址的图片,并使用proc_open输出到浏览器
- 导出 excel表格(数据、echarts图片)
- 导出 excel表格(数据、echarts图片)
- FusionCharts在服务器端导出图片(J2EE版)
- 使用 PhantomJS
- JS( 十五)自定义方式导出echarts图片
- Echarts、Highcharts、html2canvas图片导出到excle文件中
- 使用 PhantomJS + GM 实现网页中校检图片的截取
- Scrapy--使用phantomjs爬取花瓣网图片
- echarts图表导出excel
- Echarts导出为pdf
- phantomjs安装、使用
- phantomjs安装使用
- 使用selenium+phantomjs
- 使用phantomjs新的
- Perl连接GP的模板
- 黑马程序员.Android攻城狮.JAVA基础.1.1.Java环境搭建
- Oracle 10g 中的ROWID详解
- Swift语言官方文档翻译(2)
- android的文件操作。
- 使用phantomJs服务器端导出Echarts图片
- IOS 推送消息 php做推送服务端
- windows下修改eclipse的默认编码
- Google Guava - FunctionalExplained(Guava函数式风格说明)
- 相关USB驱动总结
- 一步一步教你使用unity制作ios推送
- C++ Primer笔记14_面向对象程序设计
- [转载]NSFileHandle用法
- 利用BigDecimal精确的计算浮点数