web-dev-qa-db-ja.com

Phonegap-パスを介してカメラロールから写真を取得します

私のPhoneGap/jQuery Mobileアプリでは、現在PhoneGapsのCamera APIを使用して、ユーザーが写真を撮ることができるようにしています。写真はカメラロールにも保存されています。 DestinationTypeをFILE_URIに設定し、このパスをローカルデータベースに保存しています。ただし、FILE_URIは、アプリを閉じると破棄される一時的な場所へのパスです。画像の名前を保存して、カメラロールから画像を取得することを考えていました。後でカメラロールの画像を取得するために使用できるパスはありますか？

画像をBase64としてデータベースに保存していましたが、 PhoneGap API Doc ：にあるこのメモのため、このメソッドには少しうんざりしています。

注：新しいデバイスでカメラを使用して撮影した写真の画質は非常に良好です。 Base64を使用してこのような画像をエンコードすると、これらのデバイスの一部（iPhone 4、BlackBerry Torch 9800）でメモリの問題が発生しました。したがって、FILE_URIを「Camera.destinationType」として使用することを強くお勧めします。

編集：

@SimonMacDonaldの回答で動作しました。これが私の簡略化されたコードです：

function capturePhoto() {
    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 25, destinationType: Camera.DestinationType.FILE_URI });
}

function onPhotoURISuccess(imageURI) {
    createFileEntry(imageURI);
}

function createFileEntry(imageURI) {
    window.resolveLocalFileSystemURI(imageURI, copyPhoto, fail);    
}

function copyPhoto(fileEntry) {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) { 
        fileSys.root.getDirectory("photos", {create: true, exclusive: false}, function(dir) { 
                fileEntry.copyTo(dir, "file.jpg", onCopySuccess, fail); 
            }, fail); 
    }, fail); 
}

function onCopySuccess(entry) {
    console.log(entry.fullPath)
}

function fail(error) {
    console.log(error.code);
}
cordovaphoto
20
Casey

FILE_URIメソッドを使用してファイルを取得した後、File APIを使用して画像を一時フォルダーからドキュメントフォルダーにコピーし、新しいパスをDBに保存する必要があります。

したがって、getPicture（）の結果を取得して window.resolveLocalFileSystemURI（） に渡し、FileEntryを取得します。次に、 FileEntry.copyTo（） メソッドを呼び出してファイルをバックアップできます。

10
Simon MacDonald

Cordova 1.8の時点で、これはうまく機能しています。以下を参照してください。

http://docs.phonegap.com/en/1.8.0/cordova_camera_camera.md.html#Camera

1
dijipiji

2番目のものは非推奨であるため、resolveLocalFileSystemURIを除くpromiseとresolveLocalFileSystemURLを使用するバージョンを共有します。また、新しく作成されたファイル名で元のファイル名を使用します。

function copyPhotoToAppDir(imageURI) {
  if(!imageURI){
    console.warn("You need to pass imageURI");
    return;
  }

  var fileNameSplit = imageURI.split("/"),
    fileName = fileNameSplit[fileNameSplit.length - 1],
    deferred = $q.defer();

  var copyPhoto = function(fileEntry) {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {
      fileSys.root.getDirectory("photos", {create: true, exclusive: false}, function(dir) {
        fileEntry.copyTo(dir, fileName, onCopySuccess, onFileFail);
      }, onFileFail);
    }, onFileFail);
  };

  var onCopySuccess = function onCopySuccess(entry) {
    console.log("NEW PATH", entry.fullPath);
    deferred.resolve(entry.fullPath);
  };

  var onFileFail = function (error) {
    console.log("COPY FAIL", error);
    deferred.reject();
  };

  window.resolveLocalFileSystemURL(imageURI, copyPhoto, onFileFail);

  return deferred.promise;
}

使用法：

var uri = "path1";
copyPhotoToAppDir(uri).then(function(newURI){
  console.log(newURI);
});

複数のURIの使用法：

var uriArr = ["path1", "path2"]; 
  copyPhotoPromises = [];

uriArr.forEach(function(val){
  copyPhotoPromises.Push(copyPhotoToAppDir(val));
});
$q.all(copyPhotoPromises).then(function(values){
  console.log("Array with new paths", values);
});

新しいファイルURIは「/photos/fileName.jpg」として保存されます。絶対パスを取得するには、次を使用できます。

cordova.file.documentsDirectory + newFileUri.substring(1);

ここでは、promiseを処理するためにangular）から$ qを使用していますが、jQueryのものに簡単に変更できます。

deferred = $q.defer();

次のように変更する必要があります。

deferred = jQuery.Deferred();

乾杯

0
Tukkan

コメントするのに十分な評判がないため、別の投稿を作成する必要がありました。

アドバイスをくれたSimonと解決策をくれたCaseyに感謝します。

私はiOSで写真を撮り、それをディレクトリに保存し、後でアクセスできるようにローカルストレージ上のリンクを要求するCordovaアプリに取り組んでいました。ユーザーが画像を送信した後、アプリはディレクトリから画像を削除する必要があります。

これを行う方法と、プロジェクトのDocumentsフォルダーを表示する方法に関するアドオンコードを次に示します。

$（ '＃pictureid'）。attr（ 'src'）を使用して、削除する画像の完全なディレクトリを取得できます。

function deletePic(file){
    console.log("deleting: "+file+"...");
    var file = "photos/"+file.toString().split('/').slice(-1)[0]; //gets photo name

    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys){
    fileSys.root.getFile(file, 
                {create:false}, 
                function(entry){
                    entry.remove();
                }, resOnErrorDelete);
                },
    resOnErrorDelete);          
}

function resOnErrorDelete(error) {
    console.log("resOnErrorDelete: "+error.code);
}

または、複数の写真が添付されたフォームがある場合は、写真を保存するために作成したDocumentsフォルダーに一意の名前を付けることができます。このように、写真のバッチを送信した後、写真を1枚ずつ削除するのではなく、フォルダー全体を削除できます。

function deleteFolder(folder){  
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys){
    fileSys.root.getDirectory(folder, 
                {create:true, exclusive: false}, 
                function(entry){
                    entry.removeRecursively();
                }, resOnErrorDelete);
                },
    resOnErrorDelete);          
}

function resOnErrorDelete(error) {
    console.log("resOnErrorDelete: "+error.code);
}

プロジェクトのドキュメントフォルダへのアクセスについては、plistを編集して有効にする必要があります iTunesファイル共有

[project_folder] /platforms/ios/[project_name]/[project_name]-Info.plistに移動します。右クリックしてXCodeで開きます。

キーの表が表示されます。テーブルの下の任意の場所を右クリックして、[行を追加]をクリックします。新しい行が作成されます。キーをダブルクリックして、UIFileSharingEnabledと入力します。自動的にに変更されます。アプリケーションはiTunesファイル共有をサポートし、そのキー値を[〜＃〜] yes [に設定します。 〜＃〜]。

IOSのデバイスのアプリケーションでiTunesにアクセスする場合は、下にスクロールして、フォルダを表示できるファイル共有領域を表示します。ただし、「保存先」に移動するだけで、編集はできません。

これらすべての追加情報がお役に立てば幸いです。見つけるのに2日間の調査が必要でした。

0
Gabriel Eng