Appspresso(앱스프레소) - Camera Capture (카메라 캡쳐)

카메라 기능을 이용해서 사진찍기와 기존 사진 불러오기 예제입니다.
자 시작해 볼까요.

index.html입니다.

camera.html을 따라가 보겠습니다.
두번째 항목의 링크 페이지를 열어봅니다.

초기 이미지를 셋팅하고 두개의 버튼이 있네요.
이미지를 캡쳐하는 함수와 이미지를 선택하는 함수가 정의되어 있는 js를 찾아 열어보겠습니다.

js/extapi-capture-image.js를 열어보니 위 두개의 함수가 정의되어 있습니다.
imageCapture함수를 보면, 이미지를 캡쳐하는 api를 호출하고 filesystem api를 사용해 캡쳐한 파일을 찾아 이미지의 경로를
설정합니다.  사용하는 api이름이 앞에서 보았던 deviceapis.cameramanager가 아니라, 앱스프레소에서 확장된 기능을 제공해주는 ax.ext.media api 이네요.

두번째 함수인 이미지를 불러오는 imageChoose함수를 살펴보지요.
비슷하게 ax.ext.media api를 사용해 기존에 있는 사진를 선택하고, 선택된 파일을 filesystem api를 사용해 이미지 경로를 셋팅합니다.

실제 아이폰에서 실행하는 화면을 보겠습니다.
첫화면에서 Capture image를 클릭하고, 제 데스크탑의 배경화면 사진을 찍었습니다.
아래 사용(use)버튼을 클릭하면 캡쳐된 이미지가 첫화면에 셋팅되는 것을 볼수 있습니다.

다음으로 choose image를 클릭하여 기존 이미지중 키보드 사진을 선택했습니다.
마지막 화면처럼 키보드 사진이 보여지게 됩니다.