자바스크립트로 만든 이미지 편집기(PaintWeb) 사용법

구글에서 Javascript Image Editor로 검색하면, 제법 쓸만한 HTML5 기반의 유/무료 이미지 편집기가 조회된다.

https://github.com/nhnent/tui.image-editor
https://codecanyon.net/item/pixie-image-editor/10721475
http://camanjs.com/examples/
http://developer.pixlr.com/

http://js.plus/products/image-editor/demo/ckeditor

이중에서 윈도우에서 제공하는 그림판과 유사하고 간단하게 사용할 수 있는 PaintWeb을 선호한다.

PaintWeb의 소스는 Github에서 다운 받을 수 있고, 웹 사이트에서 데모를 실행해 볼 수 있다.

하지만, PaintWeb을 Java, PHP, 닷넷(.Net) 등의 프로젝트에 넣어서 사용하는 방법에 대한 설명이 없다.

여기에서는 PaintWeb을 Java(Spring) 프로젝트에 넣어서 사용하는 데 필요한 사항을 2 가지로 정리하였다.

먼저, PaintWeb 라이브러리를 호출하여 실행하는 방법을 정리하였다.

PaintWeb을 실행하는 방법은 다운 받은 예제나 데모에서 확인 할 수 있지만, 작성된 코드가 제법 복잡해서 여기에 간단하게 정리하였다.

다음으로 작업한 이미지를 서버로 전송하여 저장하는 방법에 대하여 정리하였다.

작업한 이미지를 서버로 전송하여 저장하는 방법이 제공되지 않아서 Java로 제작하였고, 제작한 코드에 대하여 간단하게 정리하였다.

따라서, 첫 번째 내용만 조금 이해하면 PaintWeb을 자신의 프로젝트에 넣어서 사용할 수 있다.

이렇게 정리한 예제(image Editor)는 Github에서 다운받을 수 있다.

먼저 실행하는 방법을 정리한다.

다운 받은 소스에서 demos 폴더에 있는 데모(demo1.html)를 실행하면 Ajax 사용 등의 문제로 실행이 되지 않지만, 웹 프로젝트에 넣어서 경로 설정을 해주면 쉽게 사용할 수 있다.

다운 받은 파일 중 src 폴더가 PaintWeb의 라이브러리이므로, 사용할 웹 프로젝트의 자바 스크립트 폴더에 src 폴더를 paintweb 폴더라는 이름으로 복사한다.

demos 폴더에 있는 demo1.html을 웹 파일이 있는 폴더에 적절한 이름(demo1.jsp)으로 넣고 실행하면 된다.

demo1.html 파일을 열어서 PaintWeb 라이브러리 경로를 다음과 같이 수정한다.

수정 전   <script type="text/javascript" src="../build/paintweb.js"></script>
수정 후   <script type="text/javascript" src="js/paintweb/paintweb.js"></script>

demo1.html을 수정해서 실행시켜도 되고, 본 예제에서는 demo1.html 의 코드를 정리해서 index.jsp(실제로는 imageEditor.jsp)로 작성하였다.

예제로 작성한 프로젝트(imageEditor)는 Github에서 다운 받을 수 있다.

imageEditor에서는 PaintWeb라이브러리를 js 폴더에 넣어서 사용한다.

이외에 index.jsp와 ImageEditor.java, ImageEditor.jsp 파일이 예제로 작성된 파일이다.

index.jsp 은 편집할 이미지를 선택하는 페이지로 스프링(Spring) 프레임워크가 아닌 JSP 파일로 작성했다.

사용자가 편집할 이미지를 선택하면 해당 이미지를 서버로 전송하고(fileUpload)

이 이미지를 다시 다운 받아서 (fileDownload)

HTML 이미지 태그(img)에서 보여 주게 된다.

index.jsp에서는 이 기능을 구현해 두었고,

fileUpload, fileDownload 컨트롤을 ImageEditor.java에 작성하였다.

톰캣에서 다운 받은 예제를 실행한 후 웹 브라우저로 다음 주소를 입력하여 index.jsp의 실행을 확인할 수 있다.

http://localhost:8080/imageEditor/

화면 하단에 있는 [Load Image]을 클릭하여 편집할 이미지를 선택하면 다음 그림과 같이 수정(Modify) 하거나 삭제(Delete) 할수 있는 메뉴가 나타난다.

index.jsp에서 수정(Modify) 기능을 선택하면 PaintWeb 기반의 이미지 편집기가 실행된다.

이미지 편집기의 컨트롤(url)은 imageEditor로 Java로 작성된 코드는 없지만 imageEditor.jsp 파일을 뷰로 사용하여 이미지 편집을 할 수 있도록 하였다.

imageEditor.jsp 파일에서 PaintWeb를 실행하여 이미지를 편집하고, 이미지를 서버로 전송(saveImage)하여 저장한다.

saveImage 컨트롤도 ImageEditor.java에 작성되어 있다.

이상의 흐름을 순서대로 정리하면 다음과 같다.

demo1.html 파일의 PaintWeb 실행 코드를 보면 실행 시간을 측정하는 코드 등이 있어서 아주 복잡하게 보인다.

이 코드는 다음과 같이 단순화 해서 사용해도 된다.

단순화한 실제 코드는 PaintWeb을 Java에서 사용하기 위한 예제로 작성한 프로젝트 파일 중 imageEditor.jsp의 코드를 참조하면 된다.

    pw = new PaintWeb();
    pw.config.guiPlaceholder = document.getElementById('PaintWebTarget');
    pw.config.imageSaveTo   = imageSaveTo;
    pw.config.imageLoad      = document.getElementById('editableImage');
    pw.config.configFile        = 'config-example.json';
    pw.init();

이상으로 PaintWeb을 사용하는 방법과 예제 프로젝트의 전체 구조를 정리하였다.

추가적으로 PaintWeb의 속성과 사용법 몇 가지를 더 정리하였다.

guiPlaceholder는 이미지 편집기인 PaintWeb를 생성할 Div를 의미한다.

지정된 div의 자식으로 PaintWeb의 편집 도구들이 생성된다.

imageLoad는 편집할 이미지 태그(img)를 의미한다.

PaintWeb은 HTML 이미지 태그(img)의 이미지를 가져와서 편집한다.

configFile은 PaintWeb을 실행할 설정 파일로 제법 다양한 기능을 지정할 수 있다.

Init() 함수는 지정된 설정에 따라 PaintWeb을 실행하는 메소드이고,

파라미터로 지정된 pwInit 는 콜백(callback) 함수로 PaintWeb의 실행 결과를 반환한다.

생략해도 된다.

생략할 경우 편집할 이미지 태그를 숨기는 코드를 (display = 'none') 적당한 곳에 작성해야 한다.

configFile은 config-example.json이 예제로 제공된다.

소스는 JSon으로 작성하는데, 주요한 몇 가지 설정을 정리하면 다음과 같다.

속성	설명
lang	사용할 언어를 지정한다.
viewportWidth	이미지 편집 영역의 너비를 지정한다.
viewportHeight	이미지 편집 영역의 높이를 지정한다.
fillStyle	도형의 배경색을 지정한다.
strokeStyle	도형의 전경색을 지정한다.
tools	편집기에 사용할 도구들을 선택한다.
toolDefault	편집기가 실행되면 기본으로 사용될 도구를 지정한다.
fontFamilies	문자열(text) 입력시 사용할 폰트 리스트를 지정한다.
fontFamily	폰트 리스트 중 기본으로 사용할 폰트를 지정한다.

먼저 언어는 영어(en)가 기본으로 지정되어 있다.

한국어(ko)는 개인적인 필요로 몇 가지만 번역해서 github에 공유하였다.

이 파일을 PaintWeb의 lang 폴더에 넣고 configFile(config-example.json)의 lang 속성을 ko로 수정하면 한국어로 사용할 수 있다.

viewportWidth와 viewportHeight는 이미지를 편집할 영역의 너비와 높이를 지정하고,

fillStyle은 도형을 그릴 때 사용할 배경색, strokeStyle은 전경색의 기본값을 의미한다.

문자열(Text)일 경우 폰트 색을 나타내는 데, fillStyle와 strokeStyle와 구분되어 다소 이상하게 출력된다.

Tools는 PaintWeb에서 제공하는 편집 도구들로, tools 옾션에서는 자신에게 필요한 도구들만 선택해서 사용할 수 있다.

예로 ["bcurve", "cbucket", "cpicker"]를 지정하면 이 3가지 도구만 나타난다.

toolDefault는 편집기가 실행되면 기본으로 사용될 도구를 지정하는 것으로 선(line) 도형이 지정되어 있다.

그림판처럼 selection을 지정해서 사용해도 좋을 것이다.

fontFamilies은 문자열(text) 입력의 세부 옵션으로 이미지 편집기에서 사용할 폰트들을 배열로 지정하면 된다.

기본적으로 영어 폰트들이 지정되어 있고, [‘굴림체’, ‘바탕체’]처럼 한글 폰트를 지정해서 사용할 수 있다.

이상으로 PaintWeb을 사용하는 예제에 대해서 정리하였다.

다음으로 PaintWeb에서 편집한 이미지를 서버에 전송해서 저장하고,

이 이미지를 원래 이미지 태그(img)에 갱신하여 보여주기 위해 작성한 코드에 대해서 정리한다.

PaintWeb을 Java에서 사용하기 위한 예제로 작성한 프로젝트는

웹 페이지에서 이미지를 지정하고,

지정된 이미지를 PaintWeb로 편집하고,

편집된 이미지를 서버에 저장하고

처음에 지정된 이미지를 갱신해서 보여주도록 제작되었다.

웹 페이지(index.jsp)에서 이미지를 지정하고,

지정된 이미지를 PaintWeb으로 편집하고(action-imageEditor),

편집된 이미지를 서버에 저장하고(Ajax-imageSaveTo())

처음에 지정된 이미지를 갱신(# + 시간)해서 보여주도록 제작되었다.

웹 페이지에서 작성한 이미지를 서버로 전송하는 방법은 이미지를 일종의 문자열 값인 base64 코드로 변환하여 전송하는 방식을 이용한다.

PaintWeb의 저장 도구()를 클릭하면 이미지를 base64로 변환해서 작성자의 PC에 저장하는 기능이 PaintWeb에 구현되어(imageSave()) 있다.

base64로 변환된 값을 파일로 저장하는 대신 Ajax를 이용하여 서버로 전송하도록 작성하면 된다.

PaintWeb의 imageSave() 함수 중간에 별도의 함수로 imageSave()를 호출하도록 작성하였다.

PaintWeb의 imageSave()에서 작성해도 되지만 가급적 기존 코드를 손대기 않기 위해서 별도의 함수로 작성했다.

imageSave() 함수의 내용이 복잡해 보이지만 이미지 저장시 전송율을 보여주기 위해 진행 상태를 %로 보여주는 기능으로 코드가 복잡해 보일 뿐 실제 코드는 단순하다.

다음 코드는 전송율을 보여주기 위한 코드를 생략하고 작성한 코드이다.

function imageSaveTo(idata, width, height){ ~~ 생략 ~~ var boundary = 'multipartformboundary' + (new Date).getTime(); var xhr = new XMLHttpRequest(); xhr.open("POST", "saveImage"); xhr.setRequestHeader('content-type', 'multipart/form-data; boundary='+ boundary); var builder = dashdash + boundary + crlf + 'Content-Disposition: form-data; name="imageFile"' + '; filename="' + filename + '";' + crlf + ' Content-Type: application/octet-stream' + crlf + crlf; builder += idata; builder += crlf + dashdash + boundary + crlf + 'Content-Disposition: form-data; name="fileori"' + crlf + crlf + filename; builder += crlf + dashdash + boundary + dashdash + crlf; xhr.onload = function () { var newImg = document.createElement("IMG"); newImg.onload = function () { srcImg.src = newImg.src + "#img" + (new Date()).getTime(); window.close(); } newImg.src = "fileDownload?filename=" + filename+ "#img" + (new Date()).getTime(); }; ~~ 생략 ~~ xhr.send(builder); }

 

Ajax를 이용하여 전송(send)이 완료되면 (onload) [라인 13]

이미지 태그를 생성하여 [라인 14]

전송한 이미지를 다시 다운로드 받아서(fileDownload) 넣어주고 [라인 19],

이렇게 다운 받은 이미지 주소를 기존 이미지에 지정하여 새롭게 갱신(reload)한다 [라인 16].

다운 받을 때 다른 파일(URL)이라는 의미로 파일명 뒤에 “#img”와 시간을 붙여서 사용한다 [라인 16].

이렇게 복잡하게 작성한 이유는 웹 브라우저가 기존의 이미지를 캐시(cache)로 가지고 있어서 이미지 갱신이 잘 안되기 때문이다.

이미지 갱신(reload)이 제대로 되니 위해서는 이상과 같이 자바 스크립트뿐만 아니라 파일을 다운로드 하는 Java에서도 다음 코드를 추가해 주어야 한다.

public void fileDownload(HttpServletResponse response, String path, String filename) {
    ~~ 생략 ~~
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Cache-Control", "no-cache, must-revalidate");
    response.setDateHeader("Expires", 0);
    ~~ 생략 ~~
}   

이 코드가 없으면 IE에서 제대로 갱신되지 않는다.

Ajax에서 서버로 이미지를 전송하면(saveImage) [라인 5]

@RequestMapping(value = "saveImage", method = RequestMethod.POST) public void saveImage(HttpServletRequest request, MultipartFile imageFile) { String filename = filePath +"/"+ request.getParameter("fileori"); try { byte[] Filebyte = imageFile.getBytes(); imageFile.getInputStream().read(Filebyte); String encString = new String(Filebyte, "ASCII"); encString = encString.replace("data:image/png;base64,", ""); FileOutputStream fs = new FileOutputStream(filename); DataOutputStream ds = new DataOutputStream(fs); BASE64Decoder decoder = new BASE64Decoder(); byte[] data = decoder.decodeBuffer(encString); for (byte dataB : data) { ds.writeByte(dataB); } ds.close(); fs.close(); } catch (IOException e) { System.out.println("IOException Error"); } }

서버(java - saveImage)에서는 전송 받은 이미지 정보를 BASE64Decoder를 이용하여 이미지로 변환해서[라인 15] 지정된 경로에 파일로 저장한다.