Device의 카메라를 이용하기 위해서는 Phonegap의 Camera Object를 이용한다. 이 Object 는 getPicture와 cleanup 메소드를 가진다. 사진을 가져오기 위해서는 다음의 getPicture API를 이용한다.
navigator.camera.getPicture(cameraSuccess, cameraError, [cameraOptions]);
1. 사진을 가져오는 소스 변경
Optional Parameter의 sourceType을 변경하면 사진을 가져오는 소스를 변경 가능하다.
sourceType : Camera.PictureSourceType.PHOTOLIBRARY
sourceType : Camera.PictureSourceType.CAMERA
sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM
sourceType이 Camera.PictureSourceType.CAMERA일 경우 Default Camera Application을 호출하고 사진을 찍고 나면 Phonegap Application으로 돌아와서 cameraSuccess 또는 cameraError로 리턴한다. android에서는 PHOTOLIBRARY와 SAVEDPHOTOALBUM의 경우 동일 앨범을 가르킨다.
2. 사진을 가져오는 유형 변경
Optional Parameter의 destinationType을 지정하면 cameraSuccess 함수에 데이터가 넘겨지는 방식을 변경 가능하다.
destinationType : Camera.DestinationType.DATA_URL
destinationType : Camera.DestinationType.FILE_URI
DATA_URL을 설정하면 cameraSuccess에 base64로 인코딩 된 문자열을 넘겨주고, FILE_URI을 설정하면 file URI를 넘겨준다. 주의해야 할 점은 Photo Album에서 이미지들은 quality파라미터가 설정되어 있어도 quality를 자동적으로 downscale 하지 않기 때문에 메모리 문제를 일으킬 수 있다. 따라서 FILE_URI로 지정해서 사용하는 것을 권장한다.
3. 사진 파일 유형 변경
Optional Parameter의 encodingType을 지정하면 이미지 파일의 유형을 변경 가능하다.
encodingType : Camera.EncodingType.JPEG
encodingType : Camera.EncodingType.PNG
4. 사진 사이즈, Quality 변경
Optional Parameter의 targetWIdth 및 targetHeight 를 설정하여 사진의 가로 세로 사이즈를 지정 가능하며 quality로 이미지 Quality 를 변경 가능하다.
기타 옵션들도 있다.
http://docs.phonegap.com/en/2.1.0/cordova_camera_camera.md.html#Camera 를 참고할 것
[예시]
|
<!DOCTYPE html> <html> <head> <title>Capture Photo</title> <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script> <script type="text/javascript" charset="utf-8"> var pictureSource; var destinationType; document.addEventListener("deviceready",onDeviceReady,false); function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } function onPhotoDataSuccess(imageData) { var smallImage = document.getElementById('smallImage'); smallImage.style.display = 'block'; smallImage.src = "data:image/jpeg;base64," + imageData; } function onPhotoURISuccess(imageURI) { var largeImage = document.getElementById('largeImage'); largeImage.style.display = 'block'; largeImage.src = imageURI; } function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, correctOrientation : true, destinationType: destinationType.DATA_URL }); } function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, //android에서는 특별한 효과 없음, 무시됨 correctOrientation : true, destinationType: destinationType.DATA_URL }); } function getPhoto(source) { navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, correctOrientation : true, destinationType: destinationType.FILE_URI, sourceType: source }); } function onFail(message) { alert('Failed because: ' + message); } </script> </head> <body> <button onclick="capturePhoto();">Capture Photo</button> <br> <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br> <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br> <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button> //android에서는 PHOTOLIBRARY와 SAVEDPHOTOALBUM모두 동일한 앨범에서 가져옴 <br> <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> <img style="display:none;" id="largeImage" src="" /> </body> </html> |
