ImageEditor9은 모바일 전용 자바스크립트 이미지 편집기로,

모바일의 특징을 고려하여 모바일에서 손쉽게 이미지를 편집할 수 있도록 제작하였다.

소스는 github에서 받을 수 있고, 데모도 확인할 수 있다.

여기에서는 ImageEditor9의 주요 이미지 편집 기능과 자바 스크립트로 실행하는 방법을 정리한다.

 

1. 이미지 편집 기능

모바일용 이미지 편집기이기 때문에 기본적인 편집 기능은 손가락 터치를 활용한 편집 기능이다.

이미지를 한 손가락으로 누른 체 이동하면 이미지의 위치를 옮길 수 있다.

손가락 두 개를 터치한 경우에는 상황에 따라 확대/축소를 하거나 회전하도록 구현하였다.

두 손가락을 대고 좁히거나 넓히면 확대 / 축소를,

두 손가락을 옆으로 움직이면 이미지를 회전 시킬 수 있다

(구현 알고리즘은 기울기를 계산하여 수직 이동에 가까우면 확대 축소를, 수평이면 회전시키는 방식이다.)

 

메뉴를 이용한 편집 기능은 메인 메뉴를 클릭하면 위 그림처럼 세로로 메뉴가 나타난다.

제공되는 메뉴는 다음과 같고, 순서데로 가로/세로 크기변경, 좌우 회전, 확대/축소의 편집기능과 나가기, 저장 기능이 있다.

손가락을 이용해서 사용하는 회전과 크기 조정 기능을 메뉴를 이용하여 사용할 수도 있다.

회전 기능은 왼쪽과 오른쪽으로 10도씩 이동할 수 있다.

크기 조정은 10% 단위로 크기로 확대하거나 축소할 수 있다.

 

비슷한 회전 기능으로 이미지의 크기를 변경하면서 90도로 회전하는 가로/세로 크기변경 기능이 있다.

즉, 앞서의 첫 그림과 같이 가로와 세로의 크기가 바뀌는 기능을 (오른쪽 그림) 제공한다.

모바일은 기기를 회전 시켜서 사진을 찍는 경우가 많아서 구현한 기능이다.

 

편집한 이미지는 저장하거나, 저장없이 프로그램을 종료할 수 있다.

 

2. 사용방법

이러한 모바일 전용 이미지 편집기 ImageEditor9은 자바스크립트(JavaScript) 라이브러로, 다음과 같이 자바스크립트로 간단하게 실행 할 수 있다.

먼저, 사용하고자 하는 HTML 파일에서 ImageEditor9 라이브러리(ImageEditor9.js)와 디자인(ImageEditor9.css) 파일을 포함한다.

<link rel="stylesheet" href="imageEditor9.css">
<script src="imageEditor9.js"></script>

 

ImageEditor9은 이미지 편집을 하려고 할 때 생성해도 되고,

다음과 같이 HTML 문서가 로딩되고(onload) 나면 미리 생성해도(new) 된다.

  window.onload = function() { 
    img = document.getElementById('img1');
    imageEditor = new ImageEditor9 (document.getElementById("imageEditor9"));
    imageEditor.onSave = function() {
      img.src = imageEditor.toDataURL();
    }
  }

ImageEditor9을 생성할 때(new) 이미지 편집기능을 구현한 div 태그(다음 코드)를 매개 변수로 지정한다.
( document.getElementById("imageEditor9") )

이 div 태그 안에 ImageEditor9에 필요한 내용들을 생성해서 편집 기능을 사용한다.

 

ImageEditor9을 생성하고 나면,

ImageEditor9에서 편집한 이미지를 받아서 처리할 저장(onSave) 이벤트를 지정해야 한다.

여기에서는 편집한 이미지를 Base64로 받아서(toDataURL), 원본 이미지(img) 태그의 이미지를(src) 교체한다.

실제 사용할 경우에는 편집한 이미지 정보를 서버로 전송해서 저장하는 형태로 사용할 것이다.

<body>
  <div id="imageEditor9"></div>
</body>

이렇게 생성한 ImageEditor9은 showFullscreen() 함수로 화면에 보이도록 실행한다.

그리고, 편집할 이미지 원본을 지정하면(setImageSource), ImageEditor9에서 해당 이미지를 편집 할 수 있다.

  function ev_fullEditor(){
    imageEditor.showFullscreen();
    imageEditor.setImageSource(img);
  }

showFullscreen() 함수외에도 showFulldocument()함수가 제공된다.

showFullscreen() 함수는 모바일의 작은 화면을 최대한 활용하기 위해,

스크린 전체를 편집화면으로(requestFullscreen()) 사용하는 기능으로

웹브라우저에서 F11을 눌렀을때, 전체 화면으로 표시되는 기능을 이용한 것이다.

 

이 기능은 애플의 사파리(Safari)에서 동작하지 않기 때문에 showFulldocument() 함수를 제작하였다.

showFullscreen() 함수로 실행해도 애플의 사파리(Safari)에서는 showFulldocument()로 실행된다.

showFulldocument()는 스크린이 아닌 문서에 꽉찬 실행으로 팝업 다이얼로그와 같은 방식으로 구현했다.

 

이상으로 ImageEditor9은 모바일 전용 자바스크립트 이미지 편집기의 편집 기능과 사용방법에 대해서 정리하였다.

ImageEditor9은

모바일의 특징인 손가락을 이용한 편집 기능과 

모바일의 작은 화면을 극복하기 위해 전체 화면으로 이미지를 편집할 수 있는 기능에 맞추어 제작하였다.

 

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

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

+ Recent posts

티스토리툴바