web-dev-qa-db-ja.com

Phonegap-URLからデバイスフォトギャラリーに画像を保存します

Phonegapアプリケーションを開発していますが、URLの画像をデバイスフォトギャラリーに保存する必要があります。

Phonegap Apiでそれを行う方法が見つかりません。また、そのためのphonegapプラグインも見つかりませんでした。

IphoneとAndroidで動作するために必要です

どうもありがとう！

javascriptandroidioscordovaphonegap-plugins
25
justtal

これは誰でも使用できるファイルダウンロードコードです。このように使用するパラメーターは3つだけです。

1）[〜＃〜] url [〜＃〜]

2）SDカードに作成するフォルダ名

3）ファイル名（ファイルには任意の名前を付けることができます）

このコードを使用して、すべてのタイプのファイルをダウンロードできます。これを.jsとして使用できます。これはIOSでも機能します。

//First step check parameters mismatch and checking network connection if available call    download function
function DownloadFile(URL, Folder_Name, File_Name) {
//Parameters mismatch check
if (URL == null && Folder_Name == null && File_Name == null) {
    return;
}
else {
    //checking Internet connection availablity
    var networkState = navigator.connection.type;
    if (networkState == Connection.NONE) {
        return;
    } else {
        download(URL, Folder_Name, File_Name); //If available download function call
    }
  }
}

//書き込み権限とフォルダ作成を取得する2番目のステップ

function download(URL, Folder_Name, File_Name) {
//step to request a file system 
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess, fileSystemFail);

function fileSystemSuccess(fileSystem) {
    var download_link = encodeURI(URL);
    ext = download_link.substr(download_link.lastIndexOf('.') + 1); //Get extension of URL

    var directoryEntry = fileSystem.root; // to get root path of directory
    directoryEntry.getDirectory(Folder_Name, { create: true, exclusive: false }, onDirectorySuccess, onDirectoryFail); // creating folder in sdcard
    var rootdir = fileSystem.root;
    var fp = rootdir.fullPath; // Returns Fulpath of local directory

    fp = fp + "/" + Folder_Name + "/" + File_Name + "." + ext; // fullpath and name of the file which we want to give
    // download function call
    filetransfer(download_link, fp);
}

function onDirectorySuccess(parent) {
    // Directory created successfuly
}

function onDirectoryFail(error) {
    //Error while creating directory
    alert("Unable to create new directory: " + error.code);
}

  function fileSystemFail(evt) {
    //Unable to access file system
    alert(evt.target.error.code);
 }
}

//ファイルを作成されたフォルダにダウンロードするための第3ステップ

function filetransfer(download_link, fp) {
var fileTransfer = new FileTransfer();
// File download function with URL and local path
fileTransfer.download(download_link, fp,
                    function (entry) {
                        alert("download complete: " + entry.fullPath);
                    },
                 function (error) {
                     //Download abort errors or download failed errors
                     alert("download error source " + error.source);
                     //alert("download error target " + error.target);
                     //alert("upload error code" + error.code);
                 }
            );
}

有用なリンク

34
Suhas

Fileの新しいバージョン（1.0.0+）であるCordovaの最新バージョン（3.3+）は、ファイルパスの代わりにファイルシステムURLを使用します。したがって、FileSystemSuccess関数の新しいバージョンで 受け入れられた回答 を機能させるには、次の行を変更します。

var fp = rootdir.fullPath;

に：

var fp = rootdir.toURL();
17
Gian Luca Scoccia

別の簡単な方法は、Cordova/Phonegapプラグイン Canvas2ImagePlugin を使用することです。それをインストールし、Raul Sanchezによる getImageDataURL（） に基づくコードに次の関数を追加します（ありがとう！）。

function saveImageToPhone(url, success, error) {
    var canvas, context, imageDataUrl, imageData;
    var img = new Image();
    img.onload = function() {
        canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);
        try {
            imageDataUrl = canvas.toDataURL('image/jpeg', 1.0);
            imageData = imageDataUrl.replace(/data:image\/jpeg;base64,/, '');
            cordova.exec(
                success,
                error,
                'Canvas2ImagePlugin',
                'saveImageDataToLibrary',
                [imageData]
            );
        }
        catch(e) {
            error(e.message);
        }
    };
    try {
        img.src = url;
    }
    catch(e) {
        error(e.message);
    }
}

次のように使用します。

var success = function(msg){
    console.info(msg);
};

var error = function(err){
    console.error(err);
};

saveImageToPhone('myimage.jpg', success, error);
8
M165437

これはphone gap file pluginを使用して実行できます：

 var url = 'http://image_url';
    var filePath = 'local/path/to/your/file';
    var fileTransfer = new FileTransfer();
    var uri = encodeURI(url);

    fileTransfer.download(
        uri,
        filePath,
        function(entry) {
            console.log("download complete: " + entry.fullPath);
        },
        function(error) {
            console.log("download error source " + error.source);
            console.log("download error target " + error.target);
            console.log("upload error code" + error.code);
        },
        false,
        {
            headers: {
                "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
            }
        }
    );
6
Hazem Hagrass

たぶん、私はIOS用に書いたプラグインを試すことができます

gitリンクは次のとおりです。 https://github.com/Nomia/ImgDownloader

短い例：

document.addEventListener("deviceready",onDeviceReady);

//google logo url
url = 'https://www.google.com/images/srpr/logo11w.png';

onDeviceReady = function(){
    cordova.plugins.imgDownloader.downloadWithUrl(url,function(){
        alert("success");
    },function(){
        alert("error");
    });        
}

//also you can try dataUri like: 1px gif
//url = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

downloadメソッドを使用して、ローカルファイルを画像ギャラリーに保存することもできます

4
Nimbosa

最も簡単なアプローチ

それがダウンロードのフォルダにあることに問題がない場合は、次の手順を実行します

  1. アプリ内ブラウザプラグインをインストールする

    cordova plugin add cordova-plugin-inappbrowser

  2. でダウンロードボタンを作成する

    onclick="window.open("Image_URL", '_system');

これは、対応するアプリまたはブラウザで画像を開くために提供する画像をダウンロードするだけではありません。

3
aWebDeveloper

現在、 cordova-plugin-photo-library に取り組んでいます。

URL（file：//またはdata :)で指定された画像を保存できます。 iOSおよびAndroid、jpeg/png/gifで動作：

cordova.plugins.photoLibrary.saveImage(url, 'My album', function () {}, function (err) {});
2
viskin

最初に_"Could not create target file"_を得ました。

そのためには、URLでencodeURI()を使用してダウンロードします。

_var DBuri = encodeURI("https://dl.dropbox.com/u/13253550/db02.xml");
fileTransfer.download(
    DBuri,
sPath + "database.xml",
_

そして、コード このスレッドで は完全に機能しました。ここに置いて.

0
allwynmasc

コードをクリーンアップし、提案されたコードをラップしました Suhas above-受け入れられた答え angularサービスで、他のアプリケーションで簡単に使用できるようになりました。スニペット ここ 。

それを使用するには、app.js（およびindex.htmlファイル）にスクリプトを含めてから：

angular.module('myApp.controllers.whatever', [])
    .controller('WhateverController', function ($scope, SaveToGalleryService) {

    $scope.savePhoto = function(photoUrl, folderName, fileName, callback) {
        var fileName = new Date().getTime();
        SaveToGalleryService.saveToGallery(photoUrl, "Kiddiz.me", fileName, function saveSuccess(res) {
            console.log("Photo ", photoUrl, "photo saved", res);
            if (callback) {
                callback(true, res);
            }
        }, function saveFail () {
            console.log("Photo ", photoUrl, "failed to save photo");
            if (callback) {
                callback(false);
            }
        });
    }
});
0
Tomer Cagan