SVG 이미지 변환 서버 만들기

1. 개요

하이차트를 보면 나오는 차트를 사용자들이 내려 받을 수 있는 기능을 제공한다. 이 기능을 어떻게 구현을 했을지 생각을 해보았고 따라 해보기로 했다.

처음에는 Front-End단에서 해당 기능을 구현을 하려고 했다. 그래서 찾아본 것이 html2canvas라는 녀석이 였고 크롬에서 svg를 이미로 만들어 내는데 성공하였다. 
그래서 FireFox에서 테스트를 진행 동작하지 않음, IE에서 테스트 진행.... 동작하지 않음, 사파리 마찬가지.....동작하지 않았다...

html2canvas에 대해서 자세히 조사하지 않은 나의 잘못이었다. html2canvas가 이미 FireFox등 몇몇 브라우저에서는 몇가지 문제가 있다는 글들이 있었던 것이다. 근데 또 순수 이미지만 내려 받는건 잘 되었다.

위 처럼 또 다른 라이브러리를 사용해도 브라우저 고려해야 하는 것이 귀찮았고 SVG내용을 서버로 주어 이미지로 변환해서 다시 클라이언트에게 다운시키는 것을 생각 해보았다. 
그러면서 batik, itext라는 라이브러리를 찾았다. 

batik라이브러리는 SVG를 이미지로 변환 해주는 라이브러리이며 itext는 pdf관련 여러 기능을 제공해주는 라이브러리이다.

내가 생각한 간단한 개념도는 이렇다.

먼저 Client단에서 SVG내용과 어떤 형식의 파일을 받고 싶은지 전달하고 Server는 해당 내용을 받아 Type에 맞는 파일 형태로 다시 내려주는 형식을 생각했다. 

2. 구현

먼저 요청을 받아 들일 컨트롤러가 필요하다.

package com.jodu.posting2; import java.io.IOException; import java.io.InputStream; import java.util.Base64; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.batik.transcoder.TranscoderException; import org.apache.commons.io.IOUtils; import org.springframework.http.HttpHeaders; import org.springframework.http.HttpStatus; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.jodu.posting2.util.HeaderConfiguer; import com.jodu.posting2.util.JPEGReader; import com.jodu.posting2.util.MediaUtils; import com.jodu.posting2.util.SVGToJPEGConvertorUtils; import com.jodu.posting2.util.SVGToPDFConvertorUtils; @Controller public class CaptureController { @ResponseBody @SuppressWarnings("unchecked") @RequestMapping("/imageDown.do") public ResponseEntity<byte[]> responseImages(HttpServletRequest request, HttpServletResponse response) throws IOException, TranscoderException { InputStream in = null; ResponseEntity<byte[]> entity = null; Map<String, String[]> paramMap = request.getParameterMap(); String base64Data = paramMap.get("base64Data")[0]; String extention = paramMap.get("imageType")[0]; byte[] byteData = Base64.getDecoder().decode(base64Data); if(extention.equals("jpg") || extention.equals("png")) { String jpegSavePathStr = SVGToJPEGConvertorUtils.svgToJpegConverte(byteData); in = JPEGReader.savedJpegRead(jpegSavePathStr); MediaType mType = MediaUtils.getMediaType(extention); HttpHeaders headers = HeaderConfiguer.setHttpHeader(extention, mType); entity = new ResponseEntity<byte[]>(IOUtils.toByteArray(in), headers, HttpStatus.OK); in.close(); } return entity; } }

Controller의 역할은 사용자가 보내온 Base64로 인코딩된 SVG의 내용을 디코딩하고 사용자가 원하는 파일타입에 따라 Util들에게 작동을 요청한다. 변환 기능을 하는 유틸클래스의 메소드는 작업 결과 메시지로 이미지로 변환된 파일의 FileInputStream을 리턴하게 되고 이 리턴값을 바이너리로 변환하여 ResponseEntity에 담아 보내게 된다.

순서대로 호출되는 Util들에 대해서 설명을 한다.

jpg 와 png 타입일 경우 제일 먼저 호출 되는 유틸은 SVGToJPEGConverorUtils이다.

package com.jodu.posting2.util; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.util.UUID; import org.apache.batik.transcoder.TranscoderException; import org.apache.batik.transcoder.TranscoderInput; import org.apache.batik.transcoder.TranscoderOutput; import org.apache.batik.transcoder.image.ImageTranscoder; import org.apache.batik.transcoder.image.JPEGTranscoder; public abstract class SVGToJPEGConvertorUtils { public static String svgToJpegConverte(byte[] svgByte) { String savePath = PathUtils.savePath; ImageTranscoder it = new JPEGTranscoder(); it.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, new Float(.9)); String uuid = UUID.randomUUID().toString(); try(OutputStream svgOutPut = new FileOutputStream(savePath + uuid + ".svg")){ svgOutPut.write(svgByte); String svgURI = new File(savePath + uuid + ".svg").toURI().toURL().toString(); TranscoderInput input = new TranscoderInput(svgURI); OutputStream ops = new FileOutputStream(savePath + uuid + ".jpg"); TranscoderOutput output = new TranscoderOutput(ops); it.transcode(input, output); }catch (IOException | TranscoderException e) { e.printStackTrace(); } return savePath + uuid + ".jpg"; } }

SVGToJPEGConvertorUtils에서는 uuid를 이용해서 이미지 파일을 생성하는데 수많은 사용자가 요청시 파일명이 겹치면 저장이 안될 문제가 있어서 겹치지 않는 UUID를 사용하였다. 이미지 변환에 중요한 역할을 하는 부분은 ImageTranscoder의 tanscode이다. TranscoderInput 인스턴스와 TranscoderOutput 인스턴스를 받아서 input을 output형태로 변환을 해주게 된다.

SVGToJPEGConvertorUtils가 호출되고 난뒤 호출되는 유틸들은 MediaType을 설정하고 header를 조작하는 기능을 한다.

package com.jodu.posting2.util; import java.util.HashMap; import java.util.Map; import org.springframework.http.MediaType; public abstract class MediaUtils { private static Map<String, MediaType> mediaMap; static { mediaMap = new HashMap<String, MediaType>(); mediaMap.put("jpg", MediaType.IMAGE_JPEG); mediaMap.put("png", MediaType.IMAGE_PNG); mediaMap.put("pdf", MediaType.MULTIPART_FORM_DATA); } public static MediaType getMediaType(String type) { return mediaMap.get(type); } }

MediaType에서는 들어온 파일타입에 따라 타입을 결정하여 리턴을 하게 된다.

package com.jodu.posting2.util; import org.springframework.http.HttpHeaders; import org.springframework.http.MediaType; public abstract class HeaderConfiguer { public static HttpHeaders setHttpHeader(String extention, MediaType mType) { HttpHeaders headers = new HttpHeaders(); if(mType != null) { headers.setContentType(mType); // headers.setContentDispositionFormData("attchement", "Jodu_Chart." + extention); headers.set("Content-Disposition", "attachment; filename=Jodu_Chart." + extention); // headers.set("Content-Transfer-Encoding", "binary"); } return headers; } }

HeaderConfiguer에서는 ContentType과 Content-Disposition을 설정하게 되는데 다운될 파일명을 Content-Disposition에서 설정해줄 수 있다.

주석 부분을 지우지 않은 이유는 처음에 헤더를 주석 부분으로 설정을 해주니 익스플로러, 사파리에서 파일을 다운 받는 형식이 아닌 창에 보여주는 형태로 되었다.

이제 부터는 Client 단의 소스 내용을 살펴 본다.

간단한 테스트를 하기 위한 html 내용이다.

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="../lib/html2canvas.js"></script> <script src="../src/ImageCapture.js"></script> </head> <div id="test"> <div><h1>Image</h1></div> <svg height="200" width="200"> <text x="0" y="15" fill="black">HiBall Image 테스트</text> <circle cx="70" cy="70" r="40" stroke="black" stroke-width="3" fill="red"/> <circle cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="blue"/> <g clip-path="test"></g> </svg> <form id="forms" method="post" action="http://localhost:8080/posting/imageDown.do"> <select id="imageType" name="imageType"> <option value="png">Download PNG image</option> <option value="jpg">Download JPEG image</option> <option value="pdf">Download PDF image</option> <option value="svg">Download SVG vector image</option> <option value="csv">Download CSV image</option> </select> </form> <button onclick="takeScreenShot()" id="download">download</button> </div>

다음은 js소스~

window.takeScreenShot = function(event) { var downTypeValue = $("#downType").val(); // CaptureDownloader.downImage(downTypeValue); $("svg").attr({version: '1.1', xmlns: "http://www.w3.org/2000/svg"}); var svg = document.querySelector("svg"); var svgData = new XMLSerializer().serializeToString(svg); var image = new Image(); image.src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData))); var base64Data = window.btoa(unescape(encodeURIComponent(svgData))); console.log(base64Data); var tag1 = document.createElement("input"); tag1.setAttribute("type", "hidden"); tag1.setAttribute("id", "base64Data"); tag1.setAttribute("name", "base64Data"); tag1.setAttribute("value", base64Data); document.getElementById("forms").appendChild(tag1); document.getElementById("forms").submit(); }

위 소스를 기반으로 구동을 시키게 되면 아래와 같은 화면이 나타난다.

그럼 다운 버튼을 눌렀을 경우 파일이 내려 받아지는지 확인 해보자.

3. 정리

하이차트가 이러한 방식으로 구현했는지는 알 방법은 없지만 하이차트의 exporting.src.js 소스를 보게 되면 https://export.highcharts.com/을 호출하는 부분을 확인 할 수 있듯이 위와 방식과는 유사할 거 같다고 조심스럽게 예상해본다.

현재 포스팅된 내용에서는 이미지 변환간의 생성되는 파일을 삭제해주는 기능이 없어 다운받는 횟수에 따라 계속해서 파일이 누적이 된다. 파일을 삭제 하는 부분은 파일 삭제 스레드를 하나 생성하여 특정 시간마다 돌면서 삭제 하도록 만들면 재밌을거 같다.
추후 만들게 되면 추가하여 포스팅~~

SVGConvertor.zip