「batik」を利用し、svgファイルをpng画像に変換

「batik」を利用し、svgファイルをpng画像に変換します。

OpenLayersにて、svgファイルを利用したアイコンを表示させようとしたのですが、うまく表示できなかったので、javaの「batik」を利用し、svgファイルをpng画像に変換して表示させることにしました。

「batik」は、SVG（Scalable Vector Graphics ）で記述されたベクトル画像を、描画、生成、編集するために使うことができる、Javaのライブラリであり、Apache XML Graphicsプロジェクトにより開発されています。

１．batikのダウンロード

batikを以下のサイトから、ダウンロードします。今回は最新版ではなく、ver1.7を利用しました。https://www.apache.org/dist/xmlgraphics/batik/binaries/

ダウンロードした、batik-1.7.1.zipを解凍します。

２．jarの配置

batikをtomcatで利用させるため、解凍したzipから以下のjar一覧を、WEB-INF/lib配下に置きます。

jarファイル

batik-anim.jar
batik-awt-util.jar
batik-bridge.jar
batik-codec.jar
batik-css.jar
batik-dom.jar
batik-ext.jar
batik-extension.jar
batik-gui-util.jar
batik-gvt.jar
batik-parser.jar
batik-script.jar
batik-svg-dom.jar
batik-svggen.jar
batik-swing.jar
batik-transcoder.jar
batik-util.jar
batik-xml.jar
js.jar
xalan-2.6.0.jar
xerces_2_5_0.jar
xml-apis-ext.jar
xml-apis.jar

３．jspの記述

jspの引数は以下の通り。

引数	内容
svg	svgファイル名
size	生成する画像ファイルのサイズ
selected	選択の有無、選択時は黄色で強調される

jspの記述内容は以下の通り。作成したpng画像は、サーバーの負荷を低減させるため、キャッシュさせています。

<%@ page contentType="image/png;"%>
<%@ page import = "java.io.*" %>
<%@ page import = "java.awt.*" %>
<%@ page import = "org.apache.batik.transcoder.*" %>
<%@ page import = "org.apache.batik.transcoder.image.*" %>
<%@ page import = "java.awt.image.*" %>
<%@ page import = "javax.imageio.*" %>

<%
String svg = request.getParameter("svg");
String dirPath = application.getRealPath("") + "/images/svg/";
String svgPath = dirPath + svg;

String size = request.getParameter("size");
boolean selected = Boolean.valueOf(request.getParameter("selected"));
String png = svg.replaceAll(".svg", "_" + size +"x"+size + ".png");
if(selected == true){
png = svg.replaceAll(".svg", "_" + size +"x"+size + "_selected.png");
}

String pngPath = dirPath + png;

File file = new File(pngPath);
if(!file.exists())
{
InputStream istream = new FileInputStream(svgPath);
TranscoderInput input = new TranscoderInput(istream);
OutputStream ostream = new FileOutputStream(pngPath);
TranscoderOutput output = new TranscoderOutput(ostream);

// Create a PNG transcoder.
PNGTranscoder t = new PNGTranscoder();
Rectangle rect = new Rectangle(0, 0, Integer.parseInt(size), Integer.parseInt(size));
t.addTranscodingHint(PNGTranscoder.KEY_WIDTH, new Float(rect.width));
t.addTranscodingHint(PNGTranscoder.KEY_HEIGHT, new Float(rect.height));

// Save the image.
t.transcode(input, output);
ostream.flush();
ostream.close();

if(selected == true){
int bourderWidth = 4;
int width = Integer.parseInt(size) + bourderWidth * 2;
int height = Integer.parseInt(size) + bourderWidth * 2;
BufferedImage newImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
Graphics2D g = (Graphics2D)newImage.createGraphics();
g.setStroke(new BasicStroke(width));
g.setColor(Color.yellow);
g.drawRect(0, 0, width, height);
BufferedImage image = ImageIO.read(file);
g.drawImage(image, bourderWidth, bourderWidth, null);
ImageIO.write( newImage, "png", file );
}
}

BufferedImage image = ImageIO.read(file);
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write( image, "png", baos );
baos.flush();
byte[] bytes = baos.toByteArray();
baos.close();

response.setContentType( "image/png" );
response.setContentLength(bytes.length);

OutputStream os = response.getOutputStream();
os.write( bytes );
os.close();
%>

<%@ page contentType="image/png;"%>

<%@ page import = "java.io.*" %>

<%@ page import = "java.awt.*" %>

<%@ page import = "org.apache.batik.transcoder.*" %>

<%@ page import = "org.apache.batik.transcoder.image.*" %>

<%@ page import = "java.awt.image.*" %>

<%@ page import = "javax.imageio.*" %>

String svg = request.getParameter("svg");

String dirPath = application.getRealPath("") + "/images/svg/";

String svgPath = dirPath + svg;

String size = request.getParameter("size");

boolean selected = Boolean.valueOf(request.getParameter("selected"));

String png = svg.replaceAll(".svg", "_" + size +"x"+size + ".png");

if(selected == true){

png = svg.replaceAll(".svg", "_" + size +"x"+size + "_selected.png");

}

String pngPath = dirPath + png;

File file = new File(pngPath);

if(!file.exists())

{

InputStream istream = new FileInputStream(svgPath);

TranscoderInput input = new TranscoderInput(istream);

OutputStream ostream = new FileOutputStream(pngPath);

TranscoderOutput output = new TranscoderOutput(ostream);

// Create a PNG transcoder.

PNGTranscoder t = new PNGTranscoder();

Rectangle rect = new Rectangle(0, 0, Integer.parseInt(size), Integer.parseInt(size));

t.addTranscodingHint(PNGTranscoder.KEY_WIDTH, new Float(rect.width));

t.addTranscodingHint(PNGTranscoder.KEY_HEIGHT, new Float(rect.height));

// Save the image.

t.transcode(input, output);

ostream.flush();

ostream.close();

if(selected == true){

int bourderWidth = 4;

int width = Integer.parseInt(size) + bourderWidth * 2;

int height = Integer.parseInt(size) + bourderWidth * 2;

BufferedImage newImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);

Graphics2D g = (Graphics2D)newImage.createGraphics();

g.setStroke(new BasicStroke(width));

g.setColor(Color.yellow);

g.drawRect(0, 0, width, height);

BufferedImage image = ImageIO.read(file);

g.drawImage(image, bourderWidth, bourderWidth, null);

ImageIO.write( newImage, "png", file );

}

BufferedImage image = ImageIO.read(file);

ByteArrayOutputStream baos = new ByteArrayOutputStream();

ImageIO.write( image, "png", baos );

baos.flush();

byte[] bytes = baos.toByteArray();

baos.close();

response.setContentType( "image/png" );

response.setContentLength(bytes.length);

OutputStream os = response.getOutputStream();

os.write( bytes );

os.close();

４．動作確認

以下のURLで動作確認。

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

１．batikのダウンロード

２．jarの配置

３．jspの記述

４．動作確認

共有:

関連