How Can I Save An Image To An iPhone Photo Gallery Using PhoneGap?

Question

I am creating a PhoneGap app for the iPhone that displays a gallery of images. Some images are included with the project installation, and some are from the web. When a user clicks on an image, I would like them to be able to save the image to an iPhone photo gallery (Photos). Originally, I would have liked the app to let the user set the image as wallpaper, but found that it would be extremely difficult or impossible.

I could only find one solution for saving the image using PhoneGap and Objective C, but the PhoneGap solution contained the class PhoneGapCommand which is deprecated. I tried using PGPlugin, but could not get the code to work.

I am hoping that someone out there might have a current PhoneGap solution that can perform this task, or if anyone could point me in the right direction, I would really appreciate it!

Answer 1

I know this question is old but it took me a day to figure this out since this example is no longer applicable to the new version of Cordova. I am currently using version 2.5.0, so I thought I'd share this so others would not have to go through the pain I did.

To save an image, you'll have to write your own plug-in. Here are the steps:

1. Open your Cordova XCODE project and edit config.xml. Add an entry for the plugin you'll be creating.

"name" is the JavaScript namespace you'll be using and "value" is the Objective-C class name.

1. In your XCODE project, locate the "Plugins" group. Right click it and select "New File..." from the context menu. Add a new class file "MySaveImageToAlbum". It should be inherited from CDVPlugin.

2. Below are the codes for the header and the implementation files:

   // MySaveImageToAlbum.h #import

   @interface MySaveImageToAlbum : CDVPlugin
    - (void)saveImageToAlbum:(CDVInvokedUrlCommand*)command;
   @end
   

   // MySaveImageToAlbum.m #import "CDVSaveImageToAlbum.h"

   #import <UIKit/UIKit.h>
   
   
   @implementation MySaveImageToAlbum
   
   - (void)saveImageToAlbum:(CDVInvokedUrlCommand*)command
   {
       CDVPluginResult* pluginResult = nil;
       NSURL *url = [NSURL URLWithString:[command.arguments objectAtIndex:0]];
       NSData *args = [NSData dataWithContentsOfURL:url];
   
   
       if (args != nil && [args length] > 0) {
   
           @try
           {
               UIImage *image = [UIImage imageWithData:args];
               NSData *imgdata = UIImagePNGRepresentation(image);
               UIImage *image2 = [UIImage imageWithData:imgdata];
               UIImageWriteToSavedPhotosAlbum(image2, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
   
   
               pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"success"];
               [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
           }
           @catch (NSException *exception) {
               pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
               [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
           }
   
       } else {
           pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
           [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
       }
   
   }
   
   
   - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error
     contextInfo:(void *)contextInfo
   {
       // Was there an error?
       if (error != NULL)
       {
           // Show error message...
   
       }
       else  // No errors
       {
           // Show message image successfully saved
   
       }
   }
   
   
   @end
   

3. Next, you'll need to create a javascript file that calls this native code. Here's the code:

   var SaveImageToAlbum = { saveImageToAlbum: function(successCallback,errorCallback,args) { cordova.exec(successCallback, errorCallback, "SaveImageToAlbum", "saveImageToAlbum", [args]); } };

4. Make a reference to the JavaScript created in no.4 in your index.html. Suppose you have a canvas and you want to save it as an image to the camera roll, you can use its "toDataURL()" function to return a base64 PNG data. You can then call the saveImageToAlbum function and pass this as a parameter like this:

   SaveImageToAlbum.saveImageToAlbum(function(e){ navigator.notification.alert("Image has been successfully saved in the Photo Album.", null, "Image saved!"); }, function(e){ navigator.notification.alert("Image could not be saved in the Photo Album.", null, "Save error!"); }, canvas.toDataURL());

That's it!

Hope you enjoy...

Regards, Antonio C. Logarta III

Answer 2

I figured it out on my own. I was able to use Jesse MacFadyen's ImageHelper.

http://groups.google.com/group/phonegap/browse_thread/thread/ea7ee31887b2f610/fe2c0b127cf51e7a

http://groups.google.com/group/phonegap/tree/browse_frm/thread/8aeefbb9421f1b81/94963d9742b0738f?hide_quotes=no

When I first implemented this, I had all the code right, but I didn't have ImageHelper added as an entry in the PhoneGap.plist plugins section. I also changed the deprecated PhoneGapCommand to PGPlugin.