Cordova 튜토리얼을 시도해보십시오.
사용한 것 (환경)
튜토리얼을 번역하면서 시도
튜토리얼의 페이지는 아래와 같다.
Module 14: Using the Camera API
마지막 튜토리얼.
Cordova 튜토리얼을 시도해보십시오. 제 12 회
환경 구축에 대해서는 별도 정리하고 있으므로 아래 참조.
cordova&VSCode로 환경을 구축할 때까지의 우왕좌왕 메모.
Module 14: Using the Camera API
In this section, you use the Cordova Camera API to provide the user with the ability to take a picture of an employee, and use that picture as the employee's picture in the application.
이 섹션에서는 직원의 사진을 찍고 응용 프로그램 내 직원의 사진으로 사용할 수 있는 기능을 제공하는 Cordova의 Camera API를 사용합니다.
We do not persist that picture in this sample application.
이 샘플 애플리케이션에서는 이 사진을 그대로 사용하지 않습니다.
다음 코드는 애플리케이션을 Cordova 애플리케이션으로 디바이스에서 실행하는 경우에만 작동합니다.
즉, 이전과 동일하므로 데스크톱의 브라우저에서 테스트 할 수 없습니다.
1. 카메라 플러그인을 프로젝트에 추가합니다.
cordova plugin add cordova-plugin-camera
2. index.html의 employee 템플릿에 다음을 추가합니다.
<li class="table-view-cell media">
<a hre="#" class="push-right change-pic-btn">
<span class="media-object pull-left"></span>
<div class="media-body">
Change Picture
</div>
</a>
</li>
3. EmployeeView의 initialize 메소드에 다음 코드를 추가합니다.
this.$el.on('click', '.change-pic-btn', this.changePicture);
4. EmployeeView에서 changePicture 이벤트 핸들러를 정의합니다.
this.changePicture = function(event) {
event.preventDefault();
if (!navigator.camera) {
alert("Camera API not supported", "Error");
return;
}
var options = { quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: 1, // 0:Photo Library, 1=Camera, 2=Saved Album
encodingType: 0 // 0=JPG 1=PNG
};
navigator.camera.getPicture(
function(imgData) {
$('.media-object', this.$el).attr('src', "data:image/jpeg;base64,"+imgData);
},
function() {
alert('Error taking picture', 'Error');
},
options);
return false;
};
테스트 전에 해설을.
자세한 것은 readme를 읽으면 알 수 있다고 생각하기 때문에 자꾸만 해설합니다.
htps : // 기주 b. 코 m / 아파치 / 코 rdo
튜토리얼에서는
camera.getPicture(successCallback, errorCallback, options)
를 사용하고 있습니다.
quality: 50, // 保存されたイメージの品質。0〜100の範囲で表されます。100は通常、ファイル圧縮による損失なしでフル解像度です。
destinationType: Camera.DestinationType.DATA_URL, // 戻り値の形式を選択します。この場合はbase64でエンコードされた文字列で返却されます。
sourceType: 1, // 画像のソース元を選択します。コード中のコメントにもある通り、1はカメラです。
encodingType: 0 // 返される画像ファイルのエンコーディングを選択します。コード中のコメントにもある通り、0はJPGです。
그 외 파라미터의 해설은, 아래와 같이 있으므로, 신경이 쓰이면 읽어 보세요.
htps : // 기주 b. 코 m/아파치ぇ/코 rゔぁ-p㎅긴-카메라 #모즈ぇ_카메라. 카메라 오 치온 s
successCallback 과 errorCallback 은 그대로 처리 성공시와 처리 실패시의 콜백 함수를 건네줍니다.
자습서의 코드에서 성공하면
changePicture의 이벤트가 설정된 media-object 클래스를 가지는 요소의 src 속성에 "data:image/jpeg;base64,"+imgData를 설정합니다. (imgData는 카메라에서 얻은 이미지의 URL)
오류의 경우 경고를 표시합니다.
5. 애플리케이션을 테스트해 봅시다.
사람은 아니지만 최근 좋아하는 컵을 촬영해 보았습니다.
그러나 변경 내용을 저장하는 기능은 없으므로 첫 화면으로 돌아가면 이미지가 돌아갑니다.
참고 URL
Module 14: Using the Camera API
Cordova 튜토리얼을 시도해보십시오. 제 12 회
cordova&VSCode로 환경을 구축할 때까지의 우왕좌왕 메모.
Reference
이 문제에 관하여(Cordova 튜토리얼을 시도해보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tokky_se/items/5b0e4f15fbaf5b461eb8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)