web-dev-qa-db-fra.com

Phonegap - Enregistrer l'image de l'URL dans la galerie de photos de l'appareil

Je développe une application phonegap et je dois enregistrer l'image de l'URL dans la galerie de photos du périphérique.

Je ne trouve pas dans l'API PhoneGap un moyen de le faire et je n'ai pas trouvé de plugin Phonegap pour cela.

J'en ai besoin pour travailler avec Iphone et Android

Merci beaucoup!

javascriptandroidioscordovaphonegap-plugins
23
justtal

C'est un code de téléchargement de fichier qui peut être utilisé par n'importe qui. Vous avez juste trois paramètres pour utiliser ceci comme-

1) URL

2) Nom du dossier que vous voulez créer dans votre carte SD

3) Nom du fichier (Vous pouvez donner un nom à un fichier)

Tous les types de fichiers peuvent télécharger en utilisant ce code. vous pouvez utiliser ceci comme .js Et ceci fonctionne aussi avec 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
    }
  }
}

// Deuxième étape pour obtenir l'autorisation d'écriture et la création d'un dossier

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

// Troisième étape pour télécharger un fichier dans le dossier créé

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

Lien utile

34
Suhas

La dernière version de Cordova (3.3+), la version la plus récente (1.0.0+) de File utilise des URL de système de fichiers au lieu du chemin du fichier. Ainsi, pour que la réponse acceptée fonctionne avec la version la plus récente de la fonction FileSystemSuccess, changez la ligne:

var fp = rootdir.fullPath;

à:

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

Un autre moyen simple consiste à utiliser le plugin Cordova/Phonegap Canvas2ImagePlugin . Installez-le et ajoutez la fonction suivante à votre code, basée sur getImageDataURL () de Raul Sanchez (Merci!).

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

Utilisez-le comme ceci:

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

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

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

Cela peut être fait en utilisant phone gap fichier 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

Peut-être pourriez-vous essayer le plugin que j'ai écrit pour IOS 

voici le lien git: https://github.com/Nomia/ImgDownloader

Exemple court: 

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'

vous pouvez également enregistrer un fichier local dans la galerie d'images en utilisant la méthode download

4
Nimbosa

Approche la plus simple  

Si vous êtes d'accord pour le placer dans le dossier de téléchargement, procédez comme suit:

  1. Installer le plug-in de navigateur In-App 

    cordova plugin add cordova-plugin-inappbrowser

  2. Créez un bouton de téléchargement avec 

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

Non seulement cela téléchargera l'image, il vous proposera d'ouvrir l'image dans l'application ou le navigateur correspondant.

3
aWebDeveloper

J'ai initialement eu "Could not create target file". 

Pour cela, utilisez encodeURI() sur l'URL à télécharger:

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

Et le code dans ce fil a parfaitement fonctionné. Il suffit de le mettre ici.

0
allwynmasc

J'ai nettoyé et enveloppé le code suggéré par Suhas ci-dessus - la réponse acceptée dans un service angulaire afin qu'il puisse facilement être utilisé dans une autre application. Vous pouvez trouver le snipet ici .

Pour l'utiliser, vous devez inclure le script dans app.js (et votre fichier index.html), puis:

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