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

标签: batik svg 格式 | 发表时间:2014-10-26 11:01 | 作者:nethub2
出处:http://www.iteye.com
导出服务器原理解析

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



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [batik svg 格式] 推荐:

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

- - 研发管理 - ITeye博客
Highcharts图表导出(或下载)本质上是将SVG代码转换为不同文件格式的过程,用到的工具是batik,所以所谓导出服务器,只不过是调用batik,将SVG代码转换并下载. 图1-Highcharts导出服务器实现过程. 所以配置导出服务器,关键是学习如何调用batik. 有image/png、image/jpeg、image/tiff、application/pdf可选.

了解SVG

- - CSDN博客推荐文章
语言: JavaScript,HTML, SVG.         SVG- 可缩放矢量图形 ,是一个XML风格标记驱动的矢量图形的浏览器渲染引擎. 除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG. Canvas也有同样的支持情况,所以问题往往表现为:我们应该使用哪种方案.

SVG的用法

- - WebHek
先让大家感受一下用SVG技术制作的简单动画:. 如果你看不到这个演示,说明你的浏览器不支持SVG,请使用最新版的谷歌浏览器或火狐浏览器. 《 如何画出一条会动的线》这篇文章专门介绍了上面这SVG动画是如何简单的实现的. SVG是 Scalable Vector Graphics三个单词的首字母缩写.

SVG使用示例

- - JavaScript - Web前端 - ITeye博客
当用户在圆上点击时,使用js创建一个元素:. // 更高效的计时器,类似于setTimeout,不会发生丢. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

SVG动画入门

- - Web前端 - ITeye博客
今天我们继续来学习SVG动画方面的知识. 一听到动画效果,你可能就觉的头都打啦. 不要担心,SVG本身提供的动画属性非常容易使用,今天我们就来学习一下基础的知识. SVG中提供了 animate的方法来制作动画属性:. 在上面的代码中,我们在元素里面添加了一个 的标签. 包含了下面的一些属性.

理解SVG的viewport,viewBox,preserveAspectRatio

- - Web前端 - ITeye博客
        一个svg,设置了viewBox之后,viewBox的长宽值如果都小于svg的viewport的长宽值,那么结果一定是放大;但是viewBox的长宽值一旦有一个值大于vewport之后,最后的实际效果就不是放大,而是缩小了.         因为viewBox的目的是要自己设置的长宽范围填满viewport.

【转载】SVG是什么?SVG有什么用途?

- - HTML5研究小组
随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输、接收和利用它们的基础. 图形、图像是信息数据可视化的主要方式. 但现有的图形、图像格式存在着缺陷:非开放式,显示和印刷质量及适应性差,难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等. SVG正是在这样的背景下诞生的. SVG(Scalable Vector Graphics,可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形、图像标准.

【转载】比较html5、GML、SVG、VML

- - HTML5研究小组
web图形方案比较 html5、 GML、 SVG、 VML. GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下. 是基于XML的空间信息编码标准,由OpenGIS Consortium (OGC)提出,得到了许多公司的大力支持,如Oracle、Galdos、MapInfo、CubeWerx等.

jQuery矢量SVG地图插件JVectorMap

- - HTML5资源教程
JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是,jVectorMap是矢量地图,但是它同样支持地图缩放和地图平面移动等相应的功能. 由于JVectorMap是基于jQuery的,所以支持大部分主流的浏览器,应用也相当广泛.

未来必热:SVG Sprite技术介绍

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=4264. 这里所说的Sprite技术,没错,类似于CSS中的Sprite技术. 图标图形整合在一起,实际呈现的时候准确显示特定图标. 另,本文图片甚多,爪机党继续浏览需慎重. 二、SVG Sprite与symbol元素.