ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [IONIC, Cordova] 카메라, 앨범 사용하기 -1탄-
    코딩은 주댕이로/IONIC+Firebase 2015. 8. 30. 20:37

    소스 다운로드 > https://github.com/cpromise/realtimeChat

    이 예제에 사용된 소스 : keep logged in with localstorage을 다운로드 받으시면 됩니다.

    이 예제를 완성시킨 소스 : Use Camera and Album(Just take a picture and do nothing with it)을 다운로드 받으시면 됩니다.



    <iphone5 Camera>


    IONIC 앱에서 카메라와 사용자의 앨범을 제어해보도록 하겠습니다.

    차근차근 따라오세요!호홓


    STEP 1. 카메라 플러그인 설치

    초초 간단해서 하는동안 숨참고해도 될정도입니다.

    프로젝트 폴더(최상위 루트폴더)에서 

    cordova plugin add org.apache.cordova.camera

    명령어를 쳐줍시다. 그럼 진행이 되고 완료가 되면 위와 같이 Camera 플러그인이 설치완료 됩니다.




    STEP 2. 화면에 사진업로드 버튼만들기

    이건 생략할까 하다가 그래도 과정이니깐 올려봅니다.

    +버튼을 누르면 2개의 아이콘이 나타났다 사라졌다 하는 토글이벤트를 만들었고, jQuery로 구현을 햇습니다.

    (링크)ionic에 jQuery추가하기



    빨간색 상자가 추가해준 부분입니다.

    **** 카메라 아이콘을 클릭할 경우 takePicture()메소드가, 앨범 아이콘을 클릭할 경우 uploadPhoto()메소드가 실행이 되겠네요?




    STEP 3. 컨트롤러에 메소드 구현하기

    takePicture, uploadPhoto 메소드를 구현해야겠네요.

    cordova에서 제공하는 메소드를 사용해주면 됩니다. 입맛에 따라 option을 설정해주시면 되구요.

    option은 이 포스팅 맨 아래에서 설명할게요.

    (모바일을 위해서 사진으로 PC를 위해서 텍스트로 올려요)




    <실행 화면>




    사진 촬영, 앨범에서 가져오기만 했는데요. 이 가져온 사진을 어떻게 전송할지는 2편에 이어집니다!!

    <부록> Option에는 어떤 값이~?(클릭해주세요.)

  • qualityQ저장될 이미지의 Quality. 0-100의 값으로 표현하며 100을 입력하면 원본에서 손상되지 않은 파일을 만들어냅니다. 디폴트는 50입니다.

  • destinationType함수의 리턴타입을 결정합니다. 0일경우 DATA_URL, 1일경우 FILE_URI, 2일 경우 NATIVE_URI타입(iOS에 asset-library같은)으로 리턴됩니다. 디폴트는 1입니다.

    • Camera.DestinationType = {
          DATA_URL : 0,      // Return image as base64-encoded string
          FILE_URI : 1,      // Return image file URI
          NATIVE_URI : 2     // Return image native URI (e.g., assets-library:// on iOS or content:// on Android)
      };
      


    • sourceType: S사진을 어디서 가져올지 명시해줍니다. 0일경우 PHOTOLIBRARY, 1일경우 CAMERA, 2일경우 SAVEDPHOTOALBUM입니다. 디폴트는 1입니다.

      Camera.PictureSourceType = {
          PHOTOLIBRARY : 0,
          CAMERA : 1,
          SAVEDPHOTOALBUM : 2
      };
      
    • allowEdit: Allow simple editing of image before 사진을 고르기전에 간단한 수정을 하게 할 지 결정합니다. Boolean타입으로 적어주면 됩니다.

    • encodingType: C사진파일의 종류(encoding)를 결정합니다. 1일 경우 JPEG, 2일경우 PNG입니다. 디폴트는 0입니다.

      Camera.EncodingType = {
          JPEG : 0,               // Return JPEG encoded image
          PNG : 1                 // Return PNG encoded image
      };
      
    • targetWidth: 이미지의 가로 픽셀크기를 결정합니다. 항상 targetHeight와 함께 사용해야합니다. Aspect ratio remains constant. (Number)

    • targetHeight: 이미지의 세로 픽셀크기를 결정합니다. 항상 targetWidth와 함께 사용해야합니다. Aspect ratio remains constant. (Number)

    • mediaType: 미디어의 타입을 결정합니다. PictureSouceType이 PHOTOLIBRARY이거나 SAVEDPHOTOALBUM일 경우에만 작동합니다. 0일 경우 PICTURE, 1일 경우 VIDEO, 2일 경우 모두 다 입니다. 

    Camera.MediaType = {
        PICTURE: 0,    // allow selection of still pictures only. DEFAULT. Will return format specified via DestinationType
        VIDEO: 1,      // allow selection of video only, WILL ALWAYS RETURN FILE_URI
        ALLMEDIA : 2   // allow selection from all media types
    };
    

    • correctOrientation: Rotate the image to correct for the orientation of the device during capture.(Boolean)

    • saveToPhotoAlbum: 사진을 찍은 뒤 디바이스에 저장할지를 결정합니다. (Boolean)

    • popoverOptions: iPad에서 Popover의 위치를 결정합니다. (요건 먼뜻인지 잘 모르겠네요..)

    • cameraDirection: C디바이스의 어떤 카메라를 사용할지 결정합니다. 0일 경우 뒷카메라, 1일 경우 앞카메라를 사용합니다. 디폴트는 0(뒷카메라)입니다.

      Camera.Direction = {
          BACK : 0,      // Use the back-facing camera
          FRONT : 1      // Use the front-facing camera
      };
      


TAG

댓글 3

  • 강병구 2016.04.09 17:23

    안녕하세요. 혹시 Video를 가져올 수도 있나요?

    사진은 잘 되는데 MediaType을 VIDEO로 둬도 안되네요 FILE_URL을 썼는데도요..

    혹시 방법 아시나요?!

  • 신미나 2018.07.16 12:51

    IOS 에서 아래 옵션이 적용 되시나요?
    targetWidth : 300,
    targetHeight : 300,

1 2 3 4 5 6 7 ··· 13