웹 이미지 편집기 PaintWeb

forest71 2018. 5. 6. 12:42

2018. 5. 6. 12:42

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>PaintWeb</title>
    <script type="text/javascript" src="js/paintweb/paintweb.js"></script>
    <script type="text/javascript" src="js/paintweb/html2canvas.min.js"></script>
</head>
<body>
    <img id="editableImage"/>
        
    <div id="PaintWebTarget"></div>

(function () {
	srcImg = window.opener.document.getElementById("uploadImage");

img1 = document.getElementById('editableImage');
	img1.src = srcImg.src;
	img1.onload = function () {
		initEditor();
		img1.style.display = 'none';
	}
})();

function initEditor() {
	var target = document.getElementById('PaintWebTarget'),
	pw = new PaintWeb();
	pw.config.guiPlaceholder = target;
	pw.config.configFile     = 'config-example.json';
	pw.config.imageLoad 	 = img1;
	
	pw.config.imageSaveURL   = "saveImage"; // imageSave == image upload   
	pw.config.imageDownloadURL = "fileDownload";
	pw.config.afterImageSave   = afterImageSave;
	pw.init();
}

function afterImageSave(){
	window.close();
}
</script>
</body>
</html>

먼저, 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에 대하여 정리하였고,

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

저작자표시

'JavaScript > 기타' 카테고리의 다른 글

3. 파일 업로드 라이브러리: gu-upload 2019버전 (5)	2019.07.28
상용 웹에디터 - damoEDITOR (2)	2019.04.08
자바스크립트로 만든 이미지 편집기(PaintWeb) 사용법 (3)	2017.10.30
3. 기초 - 테이블 컬럼 이동 (Drag and Drop Table Columns) (2)	2017.06.29
1. 기초 - 테이블 정렬 (table sorting) (1)	2017.06.07

SW 개발이 좋은 사람

웹 이미지 편집기 PaintWeb

'JavaScript > 기타' 카테고리의 다른 글

+ Recent posts

티스토리툴바