이미지 편집기 PaintWeb은 웹에서 이미지를 편집할 수 있는 웹 어플리케이션으로

Mihai Şucan이 Javascript로 제작하였다.

윈도우의 그림판을 웹으로 구현했다고 할 수 있다.

라이브러리데모만 제공되고,

사용법(특히 서버에서 이미지 저장하는 방법)에 대한 설명이 부족해서,

Spring4 기반으로 이미지를 저장하고 관리하는 예제(github)와 설정 파일 수정하는 방법(블로그) 등을 이전에 정리하였다.


이후 필요하여, 이미지 회전, 텍스트 입력, 확대/축소 후 저장 기능 등을 추가 구현하였다.

이미지 회전은 90도 단위로 이미지를 회전하는 기능으로 새로 추가하였다.

텍스트 입력은 기존에 있던 기능으로 불편하게 구현된 것을

기존의 그림판처럼 그림(canvas) 위에서 문자를 입력하도록 구현하였다.

확대/축소 후 프로그램을 종료하면 저장되지 않던 것을 저장되도록 변경하였다.

해당 예제는 기존의 github에서 받을 수 있고,

github에서 다운 받아 실행하는 방법은 다른 문서에 정리되어 있다.

이 문서에서 github 주소와 다운받을 폴더명만 적절하게 바꾸어 주면 된다.

설치 후 실행해서 확인 할 수 있고,

저장기능을 제외한 기능을 데모 페이지에서 확인할 수 있다.


github에서 다운 받으면 다음 그림과 같이 파일들이 저장된 것을 볼 수 있다.

webapp > js > paintweb 폴더가 PaintWeb 라이브러리 폴더로

사용하고자 하는 프로젝트의 폴더에 복사해서 사용하면 된다.

webapp > WEB-INF > jsp > imageEditor.jsp 파일이 PaintWeb을 실행하는 파일로 작성된 코드는 다음과 같다.

먼저, PaintWeb 라이브러리를 사용하기 위해서는 Paintweb.js 파일을 가져와야 한다 [라인7].

이외에도 html2canvas.min.js를 사용하는데 [라인 8],

html2canvas는 html을 이미지로 변환하는 라이브러리로

사용자가 입력한 텍스트를(HTML) 이미지로 변환하기 위해 사용하였다.

Chrome에서는 문제가 없지만, 그 외의 웹 브라우저에서는 속도가 조금 떨어지는 현상이 발생한다.


PaintWeb은 이미지 태그(editableImage [라인 11])의 내용을 읽어서[라인 34] 편집한다.

기본적으로 제공되는 예제는 메인 페이지에서 이미지(uploadImage)를 지정하고,

별창에서 PaintWeb을 실행하는 방식으로 구현했다.

(PaintWeb 관련 코드만 보이기 위해서 별창으로 구현했다.)

따라서 별창에서 메인 페이지에 있는 이미지(uploadImage)를 가지고 와서 [라인 19]

별창의 이미지 태그(editableImage)에 넣어주고 [라인 22]

이 이미지를 PaintWeb이 사용하도록 코드를 작성하였다 [라인 34].

메인 페이지의 이미지를 바로 지정하지 않고 이렇게 한 것은 PaintWeb이 부모(opener)의 이미지를 인식하지 못해서 그런 것으로,

중요한 버그가 아니라 수정하지 않았다.


PaintWeb을 생성하고 [라인 31],

각자의 환경에 맞추어 설정을 한 후, 실행하면 된다 [라인 39].

설정과 관련된 보다 자세한 설명은 이전 문서를 참고하면 되고,

새로 추가한 imageSaveURL, imageDownloadURL, afterImageSave를 정리하면 [라인 36~38]

imageSaveURL은 PaintWeb에서 저장한 이미지를 서버에서 받아서 저장할 URL을 지정한다.

저장할 이미지는 Base64로 전송이 되기 때문에 이 내용을 받아서 파일로 저장하는 코드가 있는 URL (스프링의 경우 컨트롤)을 지정하면 된다.

스프링으로 작성된 saveImage의 코드는 여기서 확인할 수 있다.

imageDownloadURL은 이미지를 저장하고, 다시 받아오기 위한 URL로 imageSaveURL과 마찬가지로 ImageEditor.java 파일에 구현되어 있고 github에서 확인할 수 있다.

afterImageSave는 저장 후 호출되는 함수로,

여기서는 이미지 저장 후 별창을 닫도록 하였다(close) [라인 43].


이외의 설정이나 상세한 설명은 이전 문서를 참고하면 된다.


이상으로 수정된 PaintWeb에 대하여 정리하였고,

저장기능을 제외한 기능을 설치없이 데모 페이지에서 확인할 수 있다.




+ Recent posts