[IONIC, Cordova] 카메라, 앨범 사용하기 -2탄-

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

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

이 예제를 완성시킨 소스 : Send a image through the camera and the album.을 다운로드 받으시면 됩니다.

1탄 보러가기(클릭)

<iphone5 Camera>

아니.. 사진 전송이 없는 채팅. 요새 상상이나 할 수 있을까요?

아뇨. 없을 겁니다. 그래서 준비했습니다. 호홓 따라오쇼~

STEP 1. 사진 촬영/선택 후 이벤트 처리

**편의상 모든 설명은 사진 촬영 기준으로만 합니다.

**앨범에서 선택하는 것 또한 동일하오니 복붙해주시면 됩니다. github에는 사진촬영/앨범에서 선택 모두 처리한 소스가 올라갑니다.

소스가 생소하신분은 1탄을 보고오시면 다 이해됩니다. 아주 쉽게 설명해놨으니 이해잘될거에요.

1탄 보러가기(클릭)

이벤트 처리를 어디서 하느냐!!??

바로 getPicture이 부분에서 합니다.

이 소스를 실행시킨 뒤, 사진을 선택하면 아래와같은 화면이 뜹니다.

<실행결과>

imageData에는 이런 문자열이 전송이 되어있는데요.

API에는 A String containing the base64-encoded photo image. 라고 설명이 되어있네요. API보러가기

이게 사실상 이미지 자체를 나타내는 스트링입니다. 어떻게 사용할까요?

STEP 2. 채팅창에 이미지 띄우기

이제 저 데이터를 화면에 띄우려면.. 당연히 <img>태그를 사용해야합니다.

그리고 사진을 띄우는 대신 보통의 메시지를 띄우던 <p>태그는 감춰줘야겠죠? 아래는 이 두가지를 반영한 소스입니다.

2-1 컨트롤러

https://t1.daumcdn.net/cfile/tistory/235CE43556EAEE320C"color: rgb(102, 102, 102); font-family: dotum;">이에대한 설명은 https://en.wikipedia.org/wiki/Data_URI_scheme에서 확인하시길!!

사실상 채팅메시지로 사진자체를 전달한것입니다.

2-2 화면

그렇다면 채팅 화면에서는 어떻게 처리를 해줬을까요?

data:image로 시작하는 이미지파일일 경우에는 채팅 메시지를 가려주었습니다.

대신 img태그를 통해 이미지를 보여주었죠. ng-hide, ng-show보러가기

2-3 결과화면

STEP 3. 마무리

실제 단말에서 실행시킨 동영상입니다.

ux 문제점이 많이 있지만.. 여기서 마무리하겠습니다!