하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

1. 카메라 촬영 및 사진 선택

페이지 정보

작성자 관리자 댓글 0건 조회 494회 작성일 22-01-14 14:56

본문

1. 카메라 촬영 및 사진 선택

카메라(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="page">
<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


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.