ImagePicker 소개

ImagePicker는 모바일 장치의 앨범으로부터 이미지를 가져오는 기능을 수행하는 오브젝트입니다.

앨범으로부터 이미지 가져오기

모바일 장치에 저장된 이미지를 가져오려면 ImagePicker 오브젝트의 open 메소드를 사용합니다. open 메소드는 모바일 장치의 기본 앨범 앱을 수행하여 이미지를 사용자가 원하는 포맷으로 변환하여 가져올 수 있게 해줍니다. open 메소드 수행으로 얻은 이미지는 앱에 할당된 경로에 파일로 저장됩니다.

예제

다음은 모바일 장치의 앨범으로부터 ImagePicker 컴포넌트의 open 메소드를 사용해서 이미지를 가져오는 예제입니다.

앨범으로부터 이미지를 가져오려면 OPEN 버튼을 터치합니다. 수행결과는 하단의 탭에 표시됩니다. Image 탭에서는 이미지가 로딩되며 Information 탭에서는 결과 로그를 확인할 수 있습니다.

이미지를 특정 포맷으로 변경하여 가져오려면 상단의 메뉴에서 이미지 전달 방식, 인코딩 타입, 품질, 사이즈를 설정합니다.

• Imate Type: "url"을 설정하면 이미지의 위치 정보가 URL 형태로 전달되며, "imagedata"로 설정하면 이미지가 오브젝트 형태로 전달됩니다. 결과 값은 ImagePicker 오브젝트의 onsuccess 이벤트에서 e.imageurl, e.imagedata 속성에서 확인할 수 있습니다.

• Encoding: 이미지 형식을 JPEG 혹은 PNG로 설정합니다.

• Quality: 이미지 품질을 설정합니다. 설정 할 수 있는 값은 0~100 입니다.

• Width, Height: 이미지의 크기를 설정합니다. 0 혹은 빈값으로 설정하면 원본 이미지의 크기로 설정됩니다.

예제에서 사용한 핵심 기능

ImagePicker > open 메소드

모바일 장치의 앨범 앱을 실행하여 앨범으로부터 이미지를 가져오는 메소드입니다. 앨범에서 선택한 이미지는 설정 값에 맞게 변경된 후 %USERAPP%/_resource_/_devicepics_/ 경로에 저장되며 저장된 이미지의 URL 또는 오브젝트 형태로 전달됩니다.

ImagePickerEventInfo > imageurl 속성

앨범에서 선택한 이미지의 경로 정보를 갖는 속성입니다. open 메소드 수행시 첫 번째 인수 값을 'url'로 설정한 경우에만 유효한 속성입니다.

ImagePickerEventInfo > imagedata 속성

앨범에서 선택한 이미지를 오브젝트 형태로 갖는 속성입니다. open 메소드 수행시 첫 번째 인수 값을 'imagedata'로 설정한 경우에만 유효한 속성입니다.

system > convertRealPath 메소드

%USERAPP%, %CACHE% 등과 같은 Alias가 포함된 경로를 실제 절대 경로로 변환해주는 메소드입니다.

예제 구현 방법

ImagePicker 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

화면을 구성하기 위한 Static, Radio, Spin, Edit 컴포넌트, 이미지와 로그를 출력하기 위한 Tab, ImageViewer, TextArea 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.

화면 구성을 위해 사용한 컴포넌트 및 오브젝트는 다음과 같습니다.

Open 버튼을 터치했을 때 동작할 함수를 다음과 같이 작성합니다.

this.btn_open_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.ImagePicker00.set_imagequality(this.spn_quality.value);
	this.ImagePicker00.set_imagewidth(this.edt_width.value);
	this.ImagePicker00.set_imageheight(this.edt_height.value);

	this.ImagePicker00.open(this.rdo_imageType.text, this.rdo_encodingType.text);
};

사용자로부터 입력받은 이미지 설정값을 ImagePicker 오브젝트의 속성에 설정한 후 open 메소드를 호출합니다.

open 메소드가 수행되면 모바일 장치의 앨범 앱이 실행됩니다. 사용자가 앨범에서 이미지를 선택하고 오픈하는데 성공하면 onsuccess 이벤트가 발생하고 실패하면 onerror 이벤트가 발생합니다.

• onsuccess 이벤트 함수

this.ImagePicker00_onsuccess = function(obj:nexacro.ImagePicker,e:nexacro.ImagePickerEventInfo)
{
	var strResult, strFilePath;

	strFilePath = system.convertRealPath(e.imageurl);
	
	this.Tab00.Tabpage1.form.ImageViewer00.set_image("file://" + strFilePath);

	strResult = "Image open succeed.\n";	
	strResult += "\n> Path: "+ strFilePath;
	strResult += "\n> Encoding Type: "+ this.ImagePicker00.encodingtype;
	strResult += "\n> Delivery Type: "+ this.ImagePicker00.gettype;
	
	this.Tab00.Tabpage2.form.TextArea00.set_value(strResult);
};

• onerror 이벤트 함수

this.ImagePicker00_onerror = function(obj:nexacro.ImagePicker,e:nexacro.ImagePickerErrorEventInfo)
{
	var strResult = "Image open failed.\n";
	strResult += "\n["+ e.errortype +" "+ e.statuscode +"] "+ e.errormsg;
	
	this.Tab00.Tabpage2.form.TextArea00.set_value(strResult);
};

설정을 변경하지 않고 OPEN 버튼을 터치하여 카메라 앨범 앱이 수행되는지 확인하고 이미지를 선택하여 결과가 옳바르게 출력되는지 확인합니다.

설정을 변경한 후 동일한 방법으로 결과를 확인합니다.