[Web Chart系列之六] canvas Chart 导出图文件
前言
博主正在参加CSDN2013年度博客之星评选，如果这篇文章对您有用，请投他一票：
投票地址：http://vote.blog.csdn.net/blogstaritem/blogstar2013/oscar999
不胜感激^^
[Web Chart系列之六] canvas Chart 导出图文件
Chart 导出的原理很基本方法，在上一篇已经有介绍过。
对于Extjs 来说，在 Ext.chart.Chart 这个类直接有提供一个 save( [config] ) 的方法， 调用这个方法， 就可以在browser 下载当前这个chart 的对应格式的图形文件。
chart.save({
type: 'image/png'
});
这里使用的技术是把数据传递到服务器端， 由服务器端产生图再传到前端。
所以， 在调用save 这个方法的时候， 你会发现， 请求会访问http://svg.sencha.io/ 这个地址。
曾经， 大概在 2013 的年中的时候， 这个地址都可以访问， 当时不知何时， 这个地址的访问就会报 503 (Service Unavailable)的错误了。
这样的话， 原本可以work 的chart 导出功能， 现在就不行了。
网上搜索一下， 是说部分版本已经不提供这个服务了。
不管如何， 讲自己的服务放在别的地方， 总也不踏实， 是否可以开发出这种服务呢？
原理
首先看一看， chart.save 时，前端传递了那些参数：
参数有四个：
width 和 height 应该是图片的大小
type 应该是图的保存格式
svg 传递的就是xml方式的svg 格式的数据。
所以问题归结为一点： 在服务端如何解析这个svg 格式的数据并生成图片文件？
解决方法
看懂这些svg 数据， 并使用基本API生成一个图片不失为一种解法？
但是对java 语言来说， 是否已经存在第三方包来帮我们直接做这种事呢？
答案之一就是：
Batik
Batik是使用 svg格式图片来实现各种功能的应用程序以及Applet提供的一个基于java的工具包。
它是属于 Apache软件基金会 的一个项目， 应该是值得信赖的。
项目主页： http://xmlgraphics.apache.org/batik/
下载地址：http://mirrors.cnnic.cn/apache/xmlgraphics/batik/、
开发步骤：
1. 下载batik-1.7.zip （ 目前的最新版） 并解压
2. 把根目录， lib 和 extensions 目录下的所有lib 包拷入项目的web lib 中。(可以选择)
3. 写一个servlet ImageExportService.java
/**
* author:oscar999
*/
import java.io.IOException;
import java.io.OutputStream;
import java.io.StringReader;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.batik.transcoder.TranscoderException;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import org.apache.batik.transcoder.image.JPEGTranscoder;
import org.apache.batik.transcoder.image.PNGTranscoder;
public class ImageExportService extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
/**
* Post File to Client
* Input Parameters:
* type(image type, as png, jpeg),
* svg(svg string, post by extjs),
* filename(save file name)
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException {
String type = request.getParameter("type");
String svg = request.getParameter("svg");
String filename = "chart";
if( request.getParameter("filename")!=null&&request.getParameter("filename").length()>0)
{
filename = request.getParameter("filename");
}
String postfix;
if ("image/jpeg".equals(type)) {
response.setContentType("image/jpeg");
postfix = "jpg";
} else {
response.setContentType("image/png");
postfix = "png";
}
response.setHeader("Content-Disposition", "attachment; filename=" + filename + "." + postfix);
StringReader stringReader = new StringReader(svg);
OutputStream out = response.getOutputStream();
try {
TranscoderInput input = new TranscoderInput(stringReader);
TranscoderOutput output = new TranscoderOutput(out);
if ("image/jpeg".equals(type)) {
new JPEGTranscoder().transcode(input, output);
} else {
new PNGTranscoder().transcode(input, output);
}
} catch (TranscoderException e) {
throw new ServletException(e);
}
}
}
4. 在 web.xml 中配置此servlet 的请求路径
<servlet> <servlet-name>ImageExportService</servlet-name> <servlet-class>com.XXX.ImageExportService</servlet-class> </servlet> <servlet-mapping> <servlet-name>ImageExportService</servlet-name> <url-pattern>/ImageExportService</url-pattern> </servlet-mapping>
5. 让Extjs 的Chart.save 切换到新的服务器。
Ext.draw.engine.ImageExporter.defaultUrl = 'ImageExportService';
(注意， 这部分是写在web端的， 可以放在 Ext.onReady 里面)
6. 全部完成， 写个例子测试一下
//author: oscar999
<script type="text/javascript">
var chart;
var panel1;
Ext.require(['*']);
Ext.onReady(function() {
Ext.draw.engine.ImageExporter.defaultUrl = '/'+WEB_PROJECT_NAME+'/ImageExportService';
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':100000 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});
var chart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png',
filename:'testfile'
});
}
});
});
</script>
跨浏览器处理
可能想到会有一个问题， IE 的低版本还只是支持vml 绘图， 那在这些版本的IE中， 导出图是否就不行了呢？
其实不用担心， Extjs 已经帮我们处理好了， 即使在这些版本的IE中， 传递到服务器的也是 svg 格式的数据。
(另外发现的一点是， 如果要传入自己定义的参数, 比如filename 等， 直接从save 中可能不行，可以考虑从呼叫url 传入)
