カメラや写真を画面に表示して、永続的(PERSISTENT)に保存するサンプルです。
(Cordova 3.4.1、Androidの場合)
fileプラグイン
イメージをPERSISTENTに保存するためには、ファイル関係の操作が必要になります。コマンドラインからfileプラグインを導入しておきます。
cordova plugin org.apache.cordova.file
コーディング例
// id="camera_button"の箇所がタッチされた場合 $('#camera_button').touchend( function() { getImage( 'camera' ); } // id="album_button"の箇所がタッチされた場合 $('#album_button').touchend( function() { getImage( 'album' ); } function getImage( type ) { if(type == 'camera') { var options = { destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, encodingType: Camera.EncodingType.PNG, quality: 70 }; }else if(type == 'album'){ destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM, // Androidでは、SAVEDPHOTOALBUMとPHOTOLIBRARYは同じ encodingType: Camera.EncodingType.PNG, quality: 70 }; } // カメラ(ギャラリー)を起動 navigator.camera.getPicture( camera_success, camera_error, options ); } function camera_success(uri) { // uriのFileSystemオブジェクトを取得 window.resolveLocalFileSystemURI( uri, resolve_success, file_error ); } function resolve_success(entry) { var d = new Date(); var n = d.getTime(); // ミリ秒 var newFileName = n + ".png"; // ミリ秒でファイル名を付ければダブらない。たぶん。 var myFolderApp = "com.example"; // イメージの保存先 // (1)PERSISTENTのFileSystemオブジェクトを取得 // (2)myFolderAppというディレクトリを取得(なければ作成) // (3)myFolderAppにファイルをコピー window.requestFileSystem( LocalFileSystem.PERSISTENT, 0, function( fileSys ) { fileSys.root.getDirectory( myFolderApp, {create: true, exclusive: false}, function( directory ) { entry.copyTo( directory, newFileName, move_success, file_error ); }, file_error ); }, file_error ); } function move_success(entry) { // id="image"のIMGに画像を表示 $('#image').attr('src', entry.toNativeURL()); // 以下、データベースやローカルストレージに保存 } function file_error(error) { alert('File System Error:' + error.code); } function camera_error(message) { alert('Camera Error:' + message); }
カメラやファイル操作は、iOS, Androidその他で振る舞いが微妙に違うようです。
cameraプラグイン
fileプラグイン