wake-up-neo.com

Phonegap - Speichern Sie das Bild von der URL in die Geräte-Fotogalerie

Ich entwickle eine Phonegap-Anwendung und muss das Bild von der URL in die Geräte-Fotogalerie speichern.

Ich kann in der Phonegap Api keinen Weg finden, dies zu tun.

Ich brauche es, um mit Iphone & Android zu arbeiten

Danke vielmals!

23
justtal

Dies ist der Dateidownloadcode, der von jedermann verwendet werden kann. Sie haben nur drei Parameter, um diese

1) URL

2) Ordnername, den Sie in Ihrer SD-Karte erstellen möchten

3) Dateiname (Sie können der Datei einen beliebigen Namen geben)

Mit diesem Code können alle Dateitypen heruntergeladen werden. Sie können dies als .js .__ verwenden. Und dies funktioniert auch für 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
    }
  }
}

// Zweiter Schritt, um die Schreibberechtigung und die Ordnererstellung zu erhalten

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

// Dritter Schritt zum Herunterladen einer Datei in den erstellten Ordner

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

Nützlicher Link

34
Suhas

Die neueste Version von Cordova (3.3+), die neuere (1.0.0+) Version von File verwendet Dateisystem-URLs anstelle des Dateipfads. Um die akzeptierte Antwort mit der neueren Version in der FileSystemSuccess-Funktion arbeiten zu lassen, ändern Sie die Zeile:

var fp = rootdir.fullPath; 

zu:

var fp = rootdir.toURL(); 
17

Eine andere einfache Möglichkeit ist die Verwendung des Cordova/Phonegap-Plugins Canvas2ImagePlugin . Installieren Sie es und fügen Sie Ihrem Code die folgende Funktion hinzu, die auf getImageDataURL () von Raul Sanchez (Danke!) Basiert.

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

Verwenden Sie es so:

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

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

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

Dies kann mit der Telefonlücke file plugin erfolgen:

 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

Vielleicht könnten Sie das Plugin versuchen, das ich für IOS geschrieben habe. 

hier ist der Git-Link: https://github.com/Nomia/ImgDownloader

Kurzes Beispiel: 

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'

sie können auch eine lokale Datei in der Bildergalerie speichern, indem Sie die Methode download verwenden

4
Nimbosa

Einfachster Ansatz  

Wenn Sie damit einverstanden sind, dass Sie sich im Ordner des Downloads befinden, gehen Sie wie folgt vor

  1. Installieren Sie das In-App-Browser-Plugin 

    cordova plugin add cordova-plugin-inappbrowser
    
  2. Erstellen Sie eine Download-Schaltfläche mit 

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

Dadurch wird nicht nur das Bild heruntergeladen, das zum Öffnen des Bildes in der entsprechenden App oder im Browser angeboten wird.

3
aWebDeveloper

Ich arbeite gerade an Cordova-Plugin-Foto-Bibliothek .

Es kann ein Bild speichern, das durch die URL (Datei: // oder Daten :) angegeben wurde. Funktioniert auf iOS und Android, JPEG/PNG/GIF:

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

Ich bekam anfangs "Could not create target file"

Verwenden Sie dazu encodeURI() auf der URL zum Herunterladen:

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

Und der Code in diesem Thread hat perfekt funktioniert. Einfach hier rausbringen.

0
allwynmasc

Ich habe den vorgeschlagenen Code von Suhas oben - die akzeptierte Antwort in einem Winkeldienst bereinigt und verpackt, damit er problemlos in anderen Anwendungen verwendet werden kann. Sie finden das Snipet hier .

Um es zu verwenden, fügen Sie das Skript in app.js (und Ihre index.html-Datei) ein und dann:

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