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

Phonegap - Save image from url into device photo gallery


質問 written by michaelbn @2016-10-14 06:03:24Z

: 25 : 9 : 58

PhoneGapアプリケーションを開発しています。URLからDevice Photo GalleryにImageを保存する必要があります。

Phonegap Apiでそれを実行する方法を見つけることができず、またそのためのphonegapプラグインも見つけられませんでした。

私はiPhoneとAndroidで動作するためにそれが必要です

どうもありがとう!

回答 1 written by Suhas @2014-02-25 08:01:00Z
34

これは誰でも使用できるファイルダウンロードコードです。 これを使用するためのパラメータは3つあります。

1) URL

2)あなたのSdcardに作成したいフォルダ名

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番目のステップ

//Second step to get Write permission and Folder Creation

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

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);
 }
}

便利なリンク

コメント 1

あなたが任意のURLから画像をダウンロードした場合、それはあなたのデバイスギャラリーに自動的に表示されます。これを使用すると、画像だけでなく、新しいフォルダまたは既存のフォルダを作成することによって、任意のファイルをダウンロードできます。

written by Suhas @2014-02-05 13:52:35Z

コメント 2

こんにちは、私はファイルパスの最初にこの文字列を追加すると: file:///storage/sdcard0 - それは動作します。多分、fileSystem.rootコマンドに問題がありますか?

written by @2014-04-27 16:36:26Z

コメント 3

Gianの答えは私のために働きました。rootdir.fullPathをrootdir.toUrl()に変更します。

written by 2014年 @2014-06-24 03:03:32Z

コメント 4

If you download image from any URL, it will appear automatically in your device gallery. - 私のためではありません。ファイルシステムで見つけることができますが、ギャラリーには表示されません。

written by commonpike 2014年 @2014-10-30 15:37:26Z

コメント 5

私は過去2日間これを試しましたが、私はiOSデバイスのフォトライブラリに保存することができませんでした。代わりに、画像はアプリのサンドボックスに保存されていました(URLも推奨しています)。フォトライブラリに画像を保存するために、私は魅力のように働いたcordova-plugin-canvas2imageを使わなければなりcordova-plugin-canvas2imageこの回答には多くの支持が寄せられているので、その間にAPIが変更されたか、またはそのようなものである可能性があります。

written by エイドリアン・マリニカ @2015-11-03 15:47:44Z

回答 2 written by Community @2017-05-23 10:31:16Z
17

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

var fp = rootdir.fullPath; 

に:

to:

コメント 1

犯人を指摘して+1!

written by 2014 @2014-09-02 10:55:08Z

コメント 2

それでも、フォトギャラリーで撮影される場所に画像を保存することはできません。

written by Jane Wayne @2016-04-02 07:39:58Z

回答 3 written by M165437 @2014-04-04 19:38:27Z
8

もう一つの簡単な方法は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);
    }
}

このように使います:

Use it like this:

コメント 1

私の側では、これは写真をダウンロードするだけでなく、opが要求したようにそれをギャラリーに挿入する唯一の答えです。アンドロイドでは、MediaScannerがギャラリーのインデックスを再作成するという意図を呼び出して、すぐに表示されるようにします。iOSでは、「写真」へのアクセスを要求します。

written by commonpike 2014年 @2014-11-29 14:32:15Z

コメント 2

しかしwinphoneでは、セキュリティエラーが発生します。キャンバスは「汚染」されており、 canvas.toDataURLは許可されていません。サーバーがイメージに正しいCORSヘッダーを設定していても。

written by 15:15にcommonpike @2015-03-12 21:45:28Z

コメント 3

winphone(ie10)はここで議論されています - xhr: stackoverflow.com/questions/18112047/ ..を使用した回避策と共に。

written by 15:15のcommonpike @2015-03-12 22:31:49Z

コメント 4

これは少し変更を加えて私のために働きます。私はphonegap buildを使っています。github.com/ devgeeks / Canvas2ImageDemo

written by J261 @2016-06-27 01:10:20Z

コメント 5

大きな画像をダウンロードしている場合、これによりUIがフリーズします。

written by Julian Paolo Dayag @2018-08-09 10:44:36Z

回答 4 written by Hazem Hagrass @2014-02-05 12:28:47Z
6

これは、電話のギャップファイルプラグインを使用して実行できます。

 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=="
            }
        }
    );
コメント 1

ありがとう。しかし、どうすればデバイスギャラリーへのfilePathを知ることができますか?

written by 2014 @2014-02-05 12:32:07Z

コメント 2

あなたは内の任意のフォルダにそれを保存することができますそれからそれはあなたのギャラリーで自動的に現われるべきです:)

written by SDカード @2014-02-05 12:33:24Z

コメント 3

それはIphoneでも動作しますか?

written by 2014 @2014-02-05 12:35:21Z

コメント 4

実際にはiOS :(についてはよく分からない

written by Hazem Hagrass 14 @2014-02-05 12:39:07Z

コメント 5

OK。どうもありがとう。

written by 2014 @2014-02-05 12:40:14Z

回答 5 written by Nimbosa @2014-09-07 07:44:59Z
4

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

https://github.com/Nomia/ImgDownloader :これがgitのリンクです

簡単な例:

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'

ダウンロード方法を使用して、画像ギャラリーにローカルファイルを保存することもできます。

コメント 1

誰が私に投票をしたのかわからないし、理由もわからないが、使いやすいIOS上で動作する。:>

written by Nimbosa 2014年 @2014-10-12 05:28:16Z

コメント 2

私はそれがプラグインさえ動作しているためだと思います、質問は「アンドロイドとiosで動作するために」非常に具体的でした

written by 15:15 @2015-09-08 16:13:47Z

回答 6 written by aWebDeveloper @2016-03-21 06:25:23Z
3

最も簡単な方法

ダウンロードのフォルダに入っていて問題ない場合は、次の手順を実行します。

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

     cordova plugin add cordova-plugin-inappbrowser 
  2. でダウンロードボタンを作成する

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

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

コメント 1

それは画像をダウンロードします。なぜなら私が試したときそれはpdf.for画像のようなドキュメンテーションをダウンロードすることだけだったので私達は画像を保持しなければならずそして次にそれは(クロムで)保存を要求する。間違っていれば訂正してください

written by サントッシュ @2016-05-19 14:11:51Z

コメント 2

うーん。適用可能なすべてのプログラムをハンドラとして表示します。そうだが、ほとんどの場合、クロムが1つであり、あなたが言ったことは正しい

written by aWebDeveloper 2016年 @2016-05-20 02:42:01Z

コメント 3

画像のためのこの小さな問題に対する彼らのどんな回避策でもありますか?

written by サントッシュ @2016-05-20 08:41:57Z

回答 7 written by viskin @2016-10-19 19:39:50Z
2

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

url(file://またはdata :)で指定された画像を保存できます。 IOSとAndroid、jpeg / png / gifで動作します。

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

コメント 1

個人的なオープンソースライブラリを提供する方法を読むことをお勧めしますここにあなたのプロジェクトについて投稿する前に。

written by Martijn Pieters ♦ @2016-10-20 09:30:34Z

コメント 2

もう読んだ。質問は、iPhoneやAndroidで動作するフォトギャラリーに保存するためにphonegapプラグインを入手することでした。その答えは、@justtalが望んでいたことを達成するためのサンプルコードで解決策を提供しました。私は自分が図書館の作者であることを明らかにしました。本当に私の答えはあなたには不適切に見えますか?私は個人的にこの特定の質問に対する答えを読み、自分に役立つ解決策が見つからなかったとき、私が共有した私のプロジェクトを実行しました。

written by 16 @2016-10-20 10:15:22Z

コメント 3

特定の質問をそれ以上カスタマイズすることなく、まったく同じ回答を複数の場所に投稿していたので、その投稿を読むように求められました。あなたの図書館解決策を提供するかもしれないすべての場所を探しに行ってはいけません。

written by Martijn Pieters ♦ @2016-10-20 10:16:32Z

コメント 4

OK。参照してください、私は私が同じコピー&ペースト答えで複数の質問に答えることを理解しています、しかし我々は複数の全く同一の質問について話しています。私は自分の答えの中で何をカスタマイズできるのかわからない、同じ言葉を違う言葉で言っているのかもしれません。投稿するほうが適切でしょうか。

written by ビスキン @2016-10-20 10:24:53Z

コメント 5

その時点で、質問を重複して閉じるよう投票してくださいそれが我々がその選択肢を持っているものです。

written by Martijn Pieters ♦ @2016-10-20 10:25:20Z

回答 8 written by Community @2017-05-23 11:47:16Z
0

最初に"Could not create target file"

そのためには、ダウンロードするURLにencodeURI()を使用してください。

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

そしてこのスレッドのコード完璧に動作しました。 ここに出すだけです。

回答 9 written by Community @2017-05-23 12:18:18Z
0

私は上のSuhasが提案たコードを整理してまとめました。それは他のアプリケーションでも簡単に使えるように、角度付きサービスで受け入れられた答えです。 あなたはここでスニペットを見つけることができます。

これを使用するには、スクリプトを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);
            }
        });
    }
});