Colin's Blog
[javascript] 자바스크립트로 모바일 디바이스의 사진 갤러리 접근하기

자바스크립트를 사용하여 모바일 디바이스의 사진 갤러리에 접근하는 방법을 배워보겠습니다.

사진 갤러리에 접근하기 위한 허가 요청

먼저, 사진 갤러리에 접근하기 위해서는 사용자의 허가가 필요합니다. 이를 위해 navigator 객체의 mediaDevices.getUserMedia 메서드를 사용하여 사용자에게 허가를 요청할 수 있습니다.

navigator.mediaDevices.getUserMedia({ video: false, audio: false })
  .then(function(stream) {
    // 사용자가 허가를 하였을 때 실행되는 코드
  })
  .catch(function(err) {
    // 허가를 거부하거나 오류가 발생했을 때 실행되는 코드
  });

위의 코드에서 { video: false, audio: false } 옵션은 비디오와 오디오에 대한 허가 요청을 하지 않고, 사진에 대한 허가만 요청하게 합니다.

사진 갤러리 열기

허가를 받았다면, 이제 사진 갤러리를 열어 사용자가 원하는 사진을 선택할 수 있게 할 수 있습니다. 이를 위해 <input> 엘리먼트를 사용합니다.

var input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.capture = 'environment';

input.addEventListener('change', function(e) {
  var file = e.target.files[0];
  if (file) {
    // 선택한 사진 파일을 처리하는 코드
  }
});

input.click();

위의 코드에서 accept 속성에는 이미지 파일만 선택할 수 있도록 필터를 설정하고, capture 속성을 통해 모바일 디바이스의 후면 카메라를 사용할 수 있도록 설정합니다.

선택한 사진 파일 처리하기

사용자가 사진 파일을 선택하였다면, 이제 선택한 사진 파일을 처리하는 로직을 구현해야 합니다. 파일을 다루기 위해서는 FileReader 객체를 사용할 수 있습니다.

var reader = new FileReader();
reader.onload = function(e) {
  var imageData = e.target.result;

  // imageData를 사용하여 사진을 표시하거나 다른 작업을 수행하는 코드
};

reader.readAsDataURL(file);

위의 코드에서 onload 이벤트 핸들러는 파일을 로드한 후 실행되는 콜백 함수입니다. e.target.result는 로드된 사진 파일의 데이터를 나타냅니다.

참고 자료

© 2018 Colin. All rights reserved.