Convert SVG to PNG using Java Servlet

I am going to cover several aspects of this project in other posts. In this post i will only cover how to convert SVG to png. I will use Batik to achieve this.

I am assuming that you have very basic knowledge of JSP and Java Servlets.

Project in Brief:

1. Send SVG info as well as the final image height and width to a servlet (the image is stored in assets/input folder)
2. The servlet will convert the SVG to a png and store in assets/output folder.
3) The package used for the conversion is Batik

So here we go:

1) Create index.jsp under WebContent. Create a form in index.jsp that posts request to servlet “convert”

<form name="image" method="post" id="process" action="convert">
	//enter image path here. eg: assets/input/temp.svg (you can program this anyway you want to include image from list of many images etc.)
	<input type="text" class="text" name="img" id="img" placeholder="img">

	//enter height of the final image you want
	<input type="text" class="text" name="height" id="height" placeholder="Height"><span>px</span>

	//enter width of the final image you want
	<input type="text" class="text" name="width" id="width" placeholder="Width"><span>px</span>
</form>

        <input type="submit" value="Submit">

2) Copy all jar files from the link above for batik package in WebContent/Web-Inf/lib folder and add then to build path.

3) Create a servlet “convert”. This servlet will convert SVG to png as final.png in assets/output folder

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub 

try{
Integer width = Integer.parseInt(request.getParameter("width"));
Integer height = Integer.parseInt(request.getParameter("height"));
String img_name = request.getParameter("img");

//Step -1: We read the input SVG document into Transcoder Input
InputStream svg_URI_input = getServletContext().getResourceAsStream(img_name);
TranscoderInput input_svg_image = new TranscoderInput(svg_URI_input);        

//Step-2: Define OutputStream to PNG Image and attach to TranscoderOutput
//OutputStream png_ostream = new FileOutputStream(getServletContext().getRealPath("/") + "assets/output/final.png");
TranscoderOutput output_png_image = new TranscoderOutput(png_ostream);              

// Step-3: Create PNGTranscoder and define hints if required
PNGTranscoder my_converter = new PNGTranscoder();      

my_converter.addTranscodingHint(PNGTranscoder.KEY_WIDTH, new Float(width));
my_converter.addTranscodingHint(PNGTranscoder.KEY_HEIGHT, new Float(height));

// Step-4: Convert and Write output
//response.setContentType("image/png");

my_converter.transcode(input_svg_image, output_png_image);

png_ostream.flush();
png_ostream.close();
}catch(Exception e){
	System.err.println(e.toString());
}

}

Now if you go to /assets/output there will be final.png there which is the required image you want.

In other posts i will show how to create a download button for this image and also how to use ajax with servlets.

Hope you enjoyed this post.

Tags: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*