Batik - 将svg转换成其他格式图片或PDF - [导出服务器配置] 导出服务器原理解析

导出服务器原理解析

Highcharts图表导出(或下载)本质上是将SVG代码转换为不同文件格式的过程,用到的工具是batik,所以所谓导出服务器,只不过是调用batik,将SVG代码转换并下载。下图说明此过程

<ignore_js_op style="word-wrap: break-word;"> Batik - 将svg转换成其他格式图片或PDF - [导出服务器配置] 导出服务器原理解析_第1张图片 
图1-Highcharts导出服务器实现过程


所以配置导出服务器,关键是学习如何调用batik。

有image/png、image/jpeg、image/tiff、application/pdf可选
一、SVG

SVG即可缩放矢量图形,标准由W3C制定。Highcharts图表在现代浏览器上都是以SVG形式展现。下图为用浏览器调试工具查看图表内容

<ignore_js_op style="word-wrap: break-word;"> Batik - 将svg转换成其他格式图片或PDF - [导出服务器配置] 导出服务器原理解析_第2张图片 
图2-Highcharts在页面上展现形式

如何获取HighchartsSVG代码
通过调用Highcharts提供的getSVG()函数,即可获取图表的SVG代码,实例代码如下

[JavaScript]  纯文本查看  复制代码
1
2
var chart = $( '#container' ).highcharts();
var svg = chart.getSVG();


其结果为:

<ignore_js_op style="word-wrap: break-word;"> Batik - 将svg转换成其他格式图片或PDF - [导出服务器配置] 导出服务器原理解析_第3张图片 
图3-获取Highcharts图表的SVG代码


二、Batik
Batik是将SVG转换为常见图形文件的工具,其开发语言是Java。
Batik官网:http://xmlgraphics.apache.org/batik/

1、Batik下载
通过 http://mirrors.cnnic.cn/apache/xmlgraphics/batik/下载batik-1.7.zip  ,可以得到全部的jar包。

2Batik使用(通过cmd命令测试)
1)新建test目录,如D:\\test\
2)复制Batik所需的jar包,分别是batik-1.7.zip里的batik-rasterizer.jar及lib目录
3)获取任意图表的SVG代码,并保存为 test.svg,保存过程中请保证test.svg文件的编码为utf-8,否则会出错。(获取SVG代码的方法请参考上文)
    检测SVG文件可用的方法是用浏览器打开,如下图所示

<ignore_js_op style="word-wrap: break-word;"> Batik - 将svg转换成其他格式图片或PDF - [导出服务器配置] 导出服务器原理解析_第4张图片 
图4-浏览器打开.svg文件


    此时,test目录的文件结构为:(所有文件在后面提供下载)

<ignore_js_op style="word-wrap: break-word;"> Batik - 将svg转换成其他格式图片或PDF - [导出服务器配置] 导出服务器原理解析_第5张图片 
图5-测试目录文件结构

4)cd到test目录,执行java -jar batik-rasterizer.jar-m image/png test.svg,如图

<ignore_js_op style="word-wrap: break-word;"> Batik - 将svg转换成其他格式图片或PDF - [导出服务器配置] 导出服务器原理解析_第6张图片
图6-测试命令及结果

此时test目录就会生成test.png

<ignore_js_op style="word-wrap: break-word;"> Batik - 将svg转换成其他格式图片或PDF - [导出服务器配置] 导出服务器原理解析_第7张图片 
图7-测试成功生成PNG文件


测试成功!
同样的,运行相应的命令即可实现将SVG转换为JPG、PDF文件。下面说明执行java - jar  batik-rasterizer.jar命令的参数

3、Batik参数
上述执行命令java -jar batik-rasterizer.jar -m image/png test.svg等用到的参数命令都可以在文档中查到,主要用到的参数如下

参数 含义及取值
-d 指定生成文件的路径或文件名,不设置则生成在当前目录下
-m 指定转换类型,有image/png、image/jpeg、image/tiff、application/pdf可选
-w 指定生成文件宽度
-h 指定生成文件高度
-font-family 指定字体


更多参数请参考http://xmlgraphics.apache.org/batik/tools/rasterizer.html

三、动态语言调用Batik
1
PHP调用Batik
PHP通过exec函数调用系统命令,从而调用Batik,命令和cmd一样,其关键代码如下:

[PHP]  纯文本查看  复制代码
1
2
define ( 'BATIK_PATH' , 'batik-rasterizer.jar' );
$output = shell_exec( "java -jar " . BATIK_PATH . " $typeString -d $outfile $width temp/$tempName.svg" );


PHP配置导出服务器过程详见 《Highcharts导出服务器配置——PHP版

2JAVA调用Batik
Java通过调用org.apache.batik.apps.rasterizer.SVGConverter类提供的方法即可实现图像转换,本站将详细说明Java配置导出服务器的过程。

3ASP.net调用Batik
Asp.Net调用Batik的方法和PHP类似,通过调用系统命令形式。

四、资源下载
此次测试所用到的所有文件已打包并提供下载。
百度网盘:http://pan.baidu.com/s/1i3spVVJ

你可能感兴趣的:(svg)