Skip to content

Instantly share code, notes, and snippets.

@tomfa
Last active July 20, 2016 12:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomfa/272c481edcad14b853d0a9f103c148c6 to your computer and use it in GitHub Desktop.
Save tomfa/272c481edcad14b853d0a9f103c148c6 to your computer and use it in GitHub Desktop.
Download svg as png (or svg) with Java backend support - http://notes.webutvikling.org/converting-svg-to-png-with-javascript/
<form method="POST" action="http://localhost:2222/rest/download/png" onSubmit="getSvg(this)">
<input type="hidden" value="" name="data" type="text" />
<button type="submit">GO</button>
</form>
<div class="svg-wrapper">
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
</div>
<script>
var getSvg = function(element) {
var svgHtml = document.querySelector('.svg-wrapper').innerHTML;
element.querySelector('input').value = svgHtml;
}
</script>
package mypackage;
import javax.ws.rs.*;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
import org.apache.batik.transcoder.TranscoderException;
import org.apache.batik.transcoder.image.PNGTranscoder;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import java.io.*;
@Path("download")
public class ImageService {
@POST
@Path("svg")
@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
@Produces(MediaType.APPLICATION_OCTET_STREAM)
public Response getSvg(
@FormParam("data") String data,
@FormParam("fileName") String fileName) {
if (fileName == null || fileName.isEmpty()) {
fileName = "img";
}
String svgFile = data.replace("<svg", "<svg xmlns=\"http://www.w3.org/2000/svg\"");
return Response.ok(svgFile, MediaType.APPLICATION_OCTET_STREAM)
.header("Content-Disposition", "attachment; filename=\"" + fileName + ".svg\"")
.build();
}
@POST
@Path("png")
@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
@Produces(MediaType.APPLICATION_OCTET_STREAM)
public Response getPng(
@FormParam("data") String data,
@FormParam("fileName") String fileName) {
if (fileName == null || fileName.isEmpty()) {
fileName = "img";
}
String svgFile = data.replace("<svg", "<svg xmlns=\"http://www.w3.org/2000/svg\"");
InputStream svgFileStream;
try {
svgFileStream = new ByteArrayInputStream(svgFile.getBytes("UTF-8"));
} catch (UnsupportedEncodingException e) {
svgFileStream = new ByteArrayInputStream(svgFile.getBytes());
System.out.println("Could not get StringBytes in UTF-8");
e.printStackTrace();
}
TranscoderInput inputSvgImage = new TranscoderInput(svgFileStream);
PNGTranscoder converter = new PNGTranscoder();
ByteArrayOutputStream pngFileStream = new java.io.ByteArrayOutputStream();
TranscoderOutput outputPngImage = new TranscoderOutput(pngFileStream);
try {
converter.transcode(inputSvgImage, outputPngImage);
} catch (TranscoderException e) {
System.out.println("Error while converting svg to PNG");
e.printStackTrace();
}
return Response.ok(pngFileStream.toByteArray(), MediaType.APPLICATION_OCTET_STREAM)
.header("Content-Disposition", "attachment; filename=\"" + fileName + ".png\"")
.build();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment