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

导出服务器原理解析

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

<ignore_js_op style="word-wrap: break-word;">  
图1-Highcharts导出服务器实现过程

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

有image/png、image/jpeg、image/tiff、application/pdf可选
一、SVG
SVG即可缩放矢量图形，标准由W3C制定。Highcharts图表在现代浏览器上都是以SVG形式展现。下图为用浏览器调试工具查看图表内容

<ignore_js_op style="word-wrap: break-word;">  
图2-Highcharts在页面上展现形式

如何获取Highcharts的SVG代码
通过调用Highcharts提供的getSVG（）函数，即可获取图表的SVG代码，实例代码如下

[JavaScript] 纯文本查看 复制代码

1 2	var chart = $( '#container' ).highcharts(); var svg = chart.getSVG();

其结果为：

<ignore_js_op style="word-wrap: break-word;">  
图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包。

2、Batik使用（通过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;">  
图4-浏览器打开.svg文件

    此时，test目录的文件结构为：（所有文件在后面提供下载）

<ignore_js_op style="word-wrap: break-word;">  
图5-测试目录文件结构

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

<ignore_js_op style="word-wrap: break-word;">

图6-测试命令及结果

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

<ignore_js_op style="word-wrap: break-word;">  
图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版》

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

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

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

 

备注：

出现乱码可能原因：

1.字符编码

2.操作系统是否有中文库