사용한 것 (환경)

cordova

visualStudioCode

windows10

Android

튜토리얼을 번역하면서 시도

튜토리얼의 페이지는 아래와 같다.

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로 환경을 구축할 때까지의 우왕좌왕 메모.