[IONIC, Cordova] 카메라, 앨범 사용하기 -1탄-

소스 다운로드 > https://github.com/cpromise/realtimeChat

이 예제에 사용된 소스 : keep logged in with localstorage을 다운로드 받으시면 됩니다.

이 예제를 완성시킨 소스 : Use Camera and Album(Just take a picture and do nothing with it)을 다운로드 받으시면 됩니다.

<iphone5 Camera>

IONIC 앱에서 카메라와 사용자의 앨범을 제어해보도록 하겠습니다.

차근차근 따라오세요!호홓

STEP 1. 카메라 플러그인 설치

초초 간단해서 하는동안 숨참고해도 될정도입니다.

프로젝트 폴더(최상위 루트폴더)에서 

cordova plugin add org.apache.cordova.camera

명령어를 쳐줍시다. 그럼 진행이 되고 완료가 되면 위와 같이 Camera 플러그인이 설치완료 됩니다.

STEP 2. 화면에 사진업로드 버튼만들기

이건 생략할까 하다가 그래도 과정이니깐 올려봅니다.

+버튼을 누르면 2개의 아이콘이 나타났다 사라졌다 하는 토글이벤트를 만들었고, jQuery로 구현을 햇습니다.

(링크)ionic에 jQuery추가하기

빨간색 상자가 추가해준 부분입니다.

**** 카메라 아이콘을 클릭할 경우 takePicture()메소드가, 앨범 아이콘을 클릭할 경우 uploadPhoto()메소드가 실행이 되겠네요?

STEP 3. 컨트롤러에 메소드 구현하기

takePicture, uploadPhoto 메소드를 구현해야겠네요.

cordova에서 제공하는 메소드를 사용해주면 됩니다. 입맛에 따라 option을 설정해주시면 되구요.

option은 이 포스팅 맨 아래에서 설명할게요.

(모바일을 위해서 사진으로 PC를 위해서 텍스트로 올려요)

var takePicture = function(){ var options = { quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, allowEdit : true, encodingType : Camera.EncodingType.JPEG, targetWidth : 300, targetHeight : 300, popoverOptions : CameraPopoverOptions, saveToPhotoAlbum : false }; navigator.camera.getPicture(function(imageURI) { }, function(err) { }, options); }; $scope.takePicture = takePicture; var uploadPhoto = function(){ var options = { quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.PHOTOLIBRARY, allowEdit : true, encodingType : Camera.EncodingType.JPEG, targetWidth : 300, targetHeight : 300, popoverOptions : CameraPopoverOptions, saveToPhotoAlbum : false }; navigator.camera.getPicture(function(imageURI) { }, function(err) { }, options); }; $scope.uploadPhoto = uploadPhoto;

<실행 화면>

사진 촬영, 앨범에서 가져오기만 했는데요. 이 가져온 사진을 어떻게 전송할지는 2편에 이어집니다!!

<부록> Option에는 어떤 값이~?(클릭해주세요.)