Phonegap - Save image from url into device photo gallery

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 .jsAnd this works on IOS also.

//First step check parameters mismatch and checking network connection if available call    download functionfunction DownloadFile(URL, Folder_Name, File_Name) {//Parameters mismatch checkif (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 pathfileTransfer.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);                 }            );}

Useful Link

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