-
[IONIC, Cordova] 카메라, 앨범 사용하기 -2탄-코딩은 주댕이로/IONIC+Firebase 2015. 9. 6. 14:17
소스 다운로드 > 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.을 다운로드 받으시면 됩니다.
<iphone5 Camera>
아니.. 사진 전송이 없는 채팅. 요새 상상이나 할 수 있을까요?
아뇨. 없을 겁니다. 그래서 준비했습니다. 호홓 따라오쇼~
STEP 1. 사진 촬영/선택 후 이벤트 처리
**편의상 모든 설명은 사진 촬영 기준으로만 합니다.
**앨범에서 선택하는 것 또한 동일하오니 복붙해주시면 됩니다. github에는 사진촬영/앨범에서 선택 모두 처리한 소스가 올라갑니다.
소스가 생소하신분은 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 문제점이 많이 있지만.. 여기서 마무리하겠습니다!
'코딩은 주댕이로 > IONIC+Firebase' 카테고리의 다른 글
[IONIC, Cordova] 카메라, 앨범 사용하기 -2탄- (6) 2015.09.06 [IONIC] Command failed with exit code 65 빌드에러.. 어떻게 해결? (0) 2015.08.30 [IONIC, Cordova] 카메라, 앨범 사용하기 -1탄- (3) 2015.08.30 [IONIC] Ionic에서 제이커리 사용하기 jQuery in Ionic (0) 2015.08.30 [IONIC] LocalStroage로 로그인값 유지시키기 (6) 2015.08.16 [Firebase, Ionic] E-mail로 회원가입/로그인하기 (0) 2015.08.15 TAG
Send a image through the camera and the album을 아무리 찾아봐도 없습니다 ㅠ,ㅠ
맙소사. 커밋이 안되어있네요..
오래된 소스라 컴퓨터에도 없을텐데,,,
정말 죄송합니다...ㅠㅠ
조만간 업뎃을하던지 삭제를하던지 해야겠네요..
빠른답변감사드립니다. 잘보고 배우고있습니다 !!!ㅎㅎㅎ
별말씀을요. 작은 도움이라도 되셧다니 기쁘네요
firebase에 관심이 있으신거면 이번 구글io 2016에서 firebase에 대한 세미나가 잇나봐요. 구글에서 밀고잇나봐요. 참고하시라구요ㅎㅎ
오호 좋은정보 감사합니다. firebase여기서 처음알았네요..ㅎㅎㅎ 조금더 공부를 해봐야겟어욥.
안녕하세요?
먼저 좋은 정보 공유해주셔서 감사합니다.
ionic 앱에서 사진을 촬영할때
특정 폴더를 지정해서 사진의 이름을 정해서 저장 할 수 있나요?
예로, ionic\여행\여행사진_XXXXXXX.jpg 이처럼 사진명에 '여행사진_'을 붙여서 생성 할 수 있을까요?
그리고 앱 명이 아이오닉앱 이라고 할때
갤러리에 아이오닉앱 폴더를 생성하고 거기에 사진을 저장하게 할 수 있을까요?