하고 싶은 일

1. 사용자 등록 화면에서 카메라로 화상(jpeg)을 취득. img 태그에 이미지를 설정합니다.
2. 사용자 확인 화면에서 img 태그로 표시. 표시하고 있는 이미지를 서버(nifty mobile backend)에 등록.

※ 모바일 앱에서 잘하는 일이지만 "이거야!"라는 샘플이 없었기 때문에

환경

1.monaca(Phone Gap)
2.nifty mobile backend
3.HTML5 FileAPI(Phone Gap의 FileAPI도 참고가 된다)

주의

1.iOS만 가동 확인하고 있습니다.
2. 만든 소스를 장미하고, copipe했기 때문에, 일부 이상한 사촌이 있을지도 모릅니다.

# 설명
1. 사용자 등록 화면에서 카메라 시작. 이 때 카메라 속성에서 "destinationType:Camera.DestinationType.FILE_URI"로 설정합니다.
DATA_URI에서도 그 화면내라면 문제 없습니다만, BASE64의 데이터가 되므로, 화면 천이하면, 매우 무겁게 됩니다.

camera.js

function setOptions(srcType) {
  var options = {
      // Some common settings are 20, 50, and 100
      quality: 50,
      destinationType: Camera.DestinationType.FILE_URI,
      // In this app, dynamically set the picture source, Camera or photo gallery
      sourceType: srcType,
      encodingType: Camera.EncodingType.JPEG,
      mediaType: Camera.MediaType.PICTURE,
      allowEdit: true,
      correctOrientation: true,  //Corrects Android orientation quirks
      targetHeight : 100,
      targetWidth   :100
  }
  return options;
}
$scope.setPicture = function openFilePicker() {
  // ギャラリーの設定
  var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
  var options = setOptions(srcType);
  // カメラを起動
  navigator.camera.getPicture(function cameraSuccess(imageUri) {
    console.log('albam success get image url:' + imageUri);
    // imgタグに設定する。
    var image = document.getElementById ('picture');
    image.src = imageUri;
    // Angularの場合は、一旦スコープに保存。
    $scope.picture = imageUri;
  }, function cameraError(error) {
      console.debug("Unable to obtain picture: " + error, "app");
  }, options);
}
$scope.submit = function() {
  if ($scope.userForm.$valid) {
　　　// Angularの場合は、locationのパラメータに設定。
    $location.search("username",$scope.username);
    $location.search("password",$scope.password);
    $location.search("password_confirm",$scope.password_confirm);
    $location.search("picture",$scope.picture);
    $scope.load("next.html");
  }
};

2. submit 시 window.resolveLocalFileSystemURL(HTML5 Web API)을 사용하여 로컬 파일을 검색합니다. nifty mobile backend에 등록하려면 blob이어야 하므로 FILE → FileReader.readAsArrayBuffer로 읽어들여 Blob을 작성합니다.
(PhoneGap의 window.resolveLocalFileSystemURL에서도 인수가 다를뿐, 할 일은 아마 함께)

next.js

  // ローカルファイルを読み込んで、niftyにアップロードする。
  function addFile(imgUri) {
    return new Promise(function(resolve, reject) {
      window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) {

        console.log("get file: " + fileEntry.fullPath);//実機でフルパス取れていない。
        var filename = fileEntry.name;

        fileEntry.file(function(file) {
          var reader = new FileReader();
          reader.onloadend = function(evt) {
            //readAsArrayBufferは非同期なので、ロード完了後のイベントで行う。
            console.log("Read complete!");

            // どうも、niftyの方で、blobにしないと、imageが読み込めないらしい。
            // fileでuploadすると、ダメ。色々試したが、Mobileで一番動きそうなのはこれ？
            var blob = new Blob([evt.target.result], {type: "application/octet-binary"});
            console.log("blob size:" + blob.size);
            ncmb.File.upload(filename, blob)
            .then(function(res){
              console.log("success upload !");
              resolve(res);
             })
            .catch(function(err){
              console.log("fail upload !");
              console.log(err);
              reject(err);
             });
          };
          reader.readAsArrayBuffer(file);
        }, function() {console.log(error);});
      }, function() {console.log(error);});
    });
  };

$scope.submit = function() {
  if ($scope.userForm.$valid) {
      // カメラからDATA_URL(base64)で取得するサンプルが沢山あるが、
      // DATA_URLだと、次画面への引き継ぎが重くなる。
      // また、niftyにあげるときに、blobにしないといけないくなるので、
      // FILE_URLで取得して、ローカルのファイルをblobにした方が無難。

      $scope.picture = imageUri;
      var addfile = addFile(imageUri);
      addfile.then(function(res){
        console.log("addFile Success");
        var response = res;
        console.log(response.fileName);
      });
      addfile.catch(function(err){
          console.log(err);
      });
  }
};

마지막으로. . 기술 요소가 많이 있었고, 여러가지 빠져 붙었다. .
쓰카, 그 밖에도 참고가 될 것 같은 것 많이 만들고 있는데. .
이미 만든 소스에서 샘플 일어나기의 힘들. . 모두 왜 하고 있겠지.