카메라(Camera)
카메라로 부터 이미지를 가져오기 위해서는
navigator.camera.getPicture를 사용한다.
getPicture함수를 호출하면, 운영체제(모바일플래폼:안드로이드/iOS)에서 제공하는 카메라앱 또는 이미지 관리 앱이 실행된다.
사용자가 카메라로 촬영하면 이미지를 저장하고 이미지를 파일을 선택하면,
이미지로딩이 성공했을 경우와 이미지로딩을 실패했을 경우의 두가지 상황이 발생할 수 있다.
따라서 다음과 같이함수에 파라미터를 사용한다.
getPicture("성공콜백함수", "실패콜백함수", [options])
예)
navigator.camera.getPicture(onSuccess, onFail, {
quailty: 50, destinationType:Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById("img");
image.src = "data:image/jpeg;base64,"+imageData;
}
function onFail(message) {
alert("Failed: "+message);
}
[options]
- quality : 이미지 품질을 백분율로 지정한 값. 범위는 0~100사이의 값
- destinationType : 이미지 타입을 지정한다. 이미지 파일 경로를 요청할 지 아니면 base64 인코딩 형식의 이미지를 요청할 것인지 선택을 할 수 있도록 한다.
Camera.DestinationType.DATA-URL는 base64 인코딩 형식의 이미지를 요청하며, 기본값이다.
Camera.DestinationType.File_URI 는 이미지 파일의 경로를 요청한다.
- sourceType: 카메라에서 사진을 촬영하여 가져올 것인지, 폰에 저장된 이미지파일을 가져올 것인지 선택한다.
Camera.PictureSourceType.PHOTOLIBRARY : 포토 라이브러리에서 이미지를 가져온다. 기본값이다.
Camera.PictureSourceType.CAMERA : 카메라에서 촬영한 사진을 자져온다.
Camera.PictureSourceType.SAVEDPHOTOALBUM: 포토앨범에서 이미지를 가져온다.
- allowEdit : 카메라로 사진을 촬영한 후 편집할 것인지를 지정한다.
아이폰에서만 동작한다.
- encodingType : 이미지 압축형식을 지정한다. JPEG과 PNG중에 한가지를 선택할 수 있다.
CameraEncodingType.JPEG
CameraEncodingType.PNG
- targetWidth : 이미지의 폭을 설정
- targetHeight : 이미지의 높이를 설정
- MediaType : 사진과 동영상 지정
Camera.MediaType.PICTURE : 이미지
Camera.MediaType.VIDEO : 동영상
Camera.MediaType.ALLMEDIA : 모든 종류
파일 : camera.html
<!--
카메라(Camera)
카메라로 부터 이미지를 가져오기 위해서는
navigator.camera.getPicture를 사용한다.
getPicture함수를 호출하면, 운영체제(모바일플래폼:안드로이드/iOS)에서 제공하는 카메라앱 또는 이미지 관리 앱이 실행된다.
사용자가 카메라로 촬영하면 이미지를 저장하고 이미지를 파일을 선택하면,
이미지로딩이 성공했을 경우와 이미지로딩을 실패했을 경우의 두가지 상황이 발생할 수 있다.
따라서 다음과 같이함수에 파라미터를 사용한다.
getPicture("성공콜백함수", "실패콜백함수", [options])
예)
navigator.camera.getPicture(onSuccess, onFail, {
quailty: 50, destinationType:Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById("img");
image.src = "data:image/jpeg;base64,"+imageData;
}
function onFail(message) {
alert("Failed: "+message);
}
[options]
- quality : 이미지 품질을 백분율로 지정한 값. 범위는 0~100사이의 값
- destinationType : 이미지 타입을 지정한다. 이미지 파일 경로를 요청할 지 아니면 base64 인코딩 형식의 이미지를 요청할 것인지 선택을 할 수 있도록 한다.
Camera.DestinationType.DATA-URL는 base64 인코딩 형식의 이미지를 요청하며, 기본값이다.
Camera.DestinationType.File_URI 는 이미지 파일의 경로를 요청한다.
- sourceType: 카메라에서 사진을 촬영하여 가져올 것인지, 폰에 저장된 이미지파일을 가져올 것인지 선택한다.
Camera.PictureSourceType.PHOTOLIBRARY : 포토 라이브러리에서 이미지를 가져온다. 기본값이다.
Camera.PictureSourceType.CAMERA : 카메라에서 촬영한 사진을 자져온다.
Camera.PictureSourceType.SAVEDPHOTOALBUM: 포토앨범에서 이미지를 가져온다.
- allowEdit : 카메라로 사진을 촬영한 후 편집할 것인지를 지정한다.
아이폰에서만 동작한다.
- encodingType : 이미지 압축형식을 지정한다. JPEG과 PNG중에 한가지를 선택할 수 있다.
CameraEncodingType.JPEG
CameraEncodingType.PNG
- targetWidth : 이미지의 폭을 설정
- targetHeight : 이미지의 높이를 설정
- MediaType : 사진과 동영상 지정
Camera.MediaType.PICTURE : 이미지
Camera.MediaType.VIDEO : 동영상
Camera.MediaType.ALLMEDIA : 모든 종류
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>카메라 API</title>
<script src="./camera.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed">
<h1>카메라 API</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-bar ui-corner-all">카메라 API 다루기</h3>
<input type="button" id="cameraBtn" value="카메라"/>
<img src="" id="cameraImg" width="100%"/>
<a data-rel="back" data-role="button" data-theme="b">뒤로</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>LeeLAB</h1>
</div>
</div>
</body>
</html>
파일: camera.js
