I'm developing phonegap application and I need to save Image from url to the Device Photo Gallery.
I can't find at the Phonegap Api a way for doing it and Also I didn't find phonegap plugin for that.
I need it to work with Iphone & Android
Thanks a lot!
This is file download code which can be used by anyone. You just have three parameters to use this like-
1) URL
2) Folder name which you want to create in your Sdcard
3) File name (You can give any name to file)
All types of file can download by using this code. you can use this as .js And this works on IOS also.
//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 } } } //Second step to get Write permission and Folder Creation
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); } } //Third step for download a file into created folder
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); } ); } The latest version of Cordova (3.3+), the newer (1.0.0+) version of File uses filesystem URLs instead of the file path. So, to make the accepted answer work with the newer version in the FileSystemSuccess function change the line:
var fp = rootdir.fullPath; to:
var fp = rootdir.toURL(); Another easy way is to use the Cordova/Phonegap plugin Canvas2ImagePlugin. Install it and add the following function to your code which is based on getImageDataURL() by Raul Sanchez (Thanks!).
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:
var success = function(msg){ console.info(msg); }; var error = function(err){ console.error(err); }; saveImageToPhone('myimage.jpg', success, error); This can be done using 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==" } } ); Maybe you could try the plugin I wrote for IOS
here is the git link: https://github.com/Nomia/ImgDownloader
Short Example:
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' you can also save a local file to image gallery use the download method
I'm currently working on cordova-plugin-photo-library.
It can save image that given by url (file:// or data:). Works on ios and android, jpeg/png/gif:
cordova.plugins.photoLibrary.saveImage(url, 'My album', function () {}, function (err) {});I initially got "Could not create target file".
For that use encodeURI() on the url to download:
var DBuri = encodeURI("https://dl.dropbox.com/u/13253550/db02.xml"); fileTransfer.download( DBuri, sPath + "database.xml", And the code in this thread worked perfectly. Just putting it out here.
Simplest approach
If you are ok with it being in the download's folder do the following
Install In-App browser plugin
cordova plugin add cordova-plugin-inappbrowser Create a download button with
onclick="window.open("Image_URL", '_system'); Not only will this download the image it will offer to open the image in the corresponding app or browser.
I cleaned-up and wrapped the code suggested by Suhas above - the accepted answer in an angular service so that it can easily be used in other application. You can find the snipet here.
To use it, you include the script in app.js (and your index.html file) then:
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); } }); } });