Loading/Saving images (iPhone)

[SubPerceptual]

I've been through any and very post I can find and either I'm dense or
I'm not finding any straight answers. I have my first gap app near
completed... woohoo... but one thing still seems to escape me; How can
I simply save an image to the photo library - I mean, lets say I have
a button, link, image... whatever that when touched saves an image to
the photo library or open the image to be able to be saved? What do I
call? How? Where? Doh! :o|

Seems so simple a task, but I can find any (or make sense of) direct
or obvious way to do that? Can we? What am I missing here. I mean, I
can play videos by simply linking (actually using <video>)... so how
do I open/save an image included in my app to my library?

Any advice/samples/hints/straight answers would be awesome ;o)

Thx....

[SubPerceptual]

Really?

Is there no answer? I just can't seem to believe we don't have some
very simple solution to loading/saving images to the library from an
app. That seems so basic, like playing video, audio, etc.

[hanger]

;-) because you are supposed to search in the previous posts before
have a look on
http://groups.google.com/group/phonegap/browse_thread/thread/3f61244d7ea78cf9/f54b2ee576ee8071?hl=en%3Fhl%3Den&lnk=gst&q=hanger#f54b2ee576ee8071
The title of the thread is "Saving images" ...
It used it successfully for storing prefs,

[SubPerceptual]

Thx hanger....

Yeah :o( Caught that already post (I did search pretty thoroughly the
last couple of days)

- it isn't intended to be iphone only, just happens to be where I
started. But are you suggesting the only way to load/save images on
iphone is via CSdB?

Or maybe I'm not asking this the right way: I'm looking to pull an app-
local image, allow the user to view and/or save that image, return to
app. How would I accomplish this?

What your suggesting might be fine, if I were to stay on the iPhone...
but I'm not. So that introduces another obstacle for going to
different platforms, having to re-address the same issue across each
would be a waste - especially for such a simple action, don't you
think?

Any other solutions?

[SubPerceptual]

Note: I might be going out on a limb here... but wouldn't it make more
sense for most media types to check the extension on a url and simply
let the device(s) handle it in whatever its default way or with its
default app might be. Like, being able to have a <a href="path/
image.png">image</a> and simply say, Oh, its pointing directly at a
png, a png is an image file, better open this in whatever my default
image viewer is....

Personally I think that might solve handling media on all the
platforms and allow us to write once ;o)

[hanger]

There was a long discussion about it
http://groups.google.com/group/phonegap/browse_thread/thread/9f9e1698053e2e27/ba888b7047d46d6d?hl=en%3Fhl%3Den&lnk=gst&q=hanger#ba888b7047d46d6d
It doen't look like that there is an easy solution for it. The V2 of
android sdk has just been released, maybe webview would in a near
futur support html5 db ..

Concerning the image save/load operations, I haven't read anything
about it, but I'm pretty sure that sharing files between apps is
forbidden, I couldn't image Apple let any application, even validated,
accessing other app datas

[SubPerceptual]

> Concerning the image save/load operations, I haven't read anything
> about it, but I'm pretty sure that sharing files between apps  is
> forbidden, I couldn't image Apple let any application, even validated,
> accessing other app datas

I might agree and follow that - but we should remember any of those
apps that have photo galleries that allow you to save images are
passing (directly or indirectly) files between apps ;o) Even if we
think they are just saving a photo to the library, its still moving
the file from it's possession to another location on the device. An
example for iPhone might be the various model/girl apps that sport
video (some stream, some don't) and wallpaper images that can be saved
to library - that's pretty close to what I have cooked up... so I do
think that sharing files between apps is okay.

It's just simply mind boggling and extremely disappointing that with
all we can accomplish with/through gap, we can't save an image to the
library. Great for many things I suppose, but obviously a waste of
time for the rest :o(

I guess I'll just scrap the gap project and build it for each device
separately.... bummer... I came up with some pretty groovy solutions
for fixed multi-views, shared horizontal scrollers, etc that I would
hate to see go unused - where would be a good place to post them for
others using gap (they hold up nicely across platforms)?

[Jesse MacFadyen]

Hey SubPerceptual,

On iPhone it is possible to save an image to the user's camera roll using UIImageWriteToSavedPhotosAlbum, I have not investigated the other platforms, but there should be something similar.

However, this functionality is currently not exposed in PhoneGap.

If you are comfortable with Objective-C and wanted to program this functionality via your own command in the phonegap/commands project group, I would be interested in seeing your code, and would consider merging it into the plug-in architecture we are currently pursuing.

Can you elaborate on this:

came up with some pretty groovy solutions
for fixed multi-views, shared horizontal scrollers, etc

Cheers,

  Jesse

[Jesse MacFadyen]

I have worked with SubPerceptual on the specifics of this offline, but I thought I would update the rest of the group.
This functionality will be implemented as a plugin of some sort down the road, but here is how you can do it if you want this functionality.
Note that this code is iPhone only..

Use Case:
You have an image that is packed with your iPhone binary, and you want to give the user the ability to save the image to their camera-roll, so they can use it as wallpaper or something.

What to do:
1) make sure you are indeed packaging the image with your binary, and it is included in the 'Copy Bundle Resources' build step
2) Create a new command, that inherits from PhoneGapCommand ( I called it ImageHelper )
3) Here is an implementation of a method called saveToUserLibrary which takes a single argument of the image path.  Note that path is relative to the application root, so it is one above the www folder.

//  Created by Jesse MacFadyen on 09-11-05.
//  2009 Nitobi. All rights reserved.
#import <Foundation/Foundation.h>
#import "PhoneGapCommand.h"

@interface ImageHelper : PhoneGapCommand {
}
- (void) saveToUserLibrary:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;
@end


@implementation ImageHelper
- (void)saveToUserLibrary:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options
{
    NSString* argPath = [ [arguments objectAtIndex:0] autorelease ];
    UIImage *img = nil;
   
    if([ argPath hasPrefix:@"http" ] ) // Note, http downloads are not currently working
    {
        NSURL *url = [NSURL URLWithString:argPath];
        NSData *data = [NSData dataWithContentsOfURL:url];
        img = [ [ [ UIImage alloc ] autorelease ] initWithData:data ] ;
    }
    else
    {
        NSString* path = [ [ [ NSBundle mainBundle ] bundlePath ] stringByAppendingString:argPath ];
        img = [[[UIImage alloc] initWithContentsOfFile:path] autorelease];
    }
   
    if(img != nil)
    {
        UIImageWriteToSavedPhotosAlbum(img, nil,nil,nil);
    }
}
@end

4) Now from your js/html code in your www folder, make a call like this:

PhoneGap.exec("ImageHelper.saveToUserLibrary","/www/underboob.png");

Again, note that the path includes the www folder, and starts with /
After executing this code you should see the image has been created in the CameraRoll.

Enjoy!

[SubPerceptual]

for inline example....

function runImageTest(img)
{
PhoneGap.exec("ImageHelper.saveToUserLibrary",img);
}


then just use onclick...

<a href="#" onclick="runImageTest('/www/underboob.png');">save image</
a>

Now, everyone thank Jesse ;o)

[Darrin Patey]

13 hours later, I've got it.  I'll post here what was tripping me up in the hopes that nobody ever has to feel the pain I've just felt.

The original instructions from Jesse say:

 - "Create a new command, that inherits from PhoneGapCommand ( I called it ImageHelper )"

Couple things to note - 

1. PhoneGapCommand is deprecated.  You need to include CDVPlugin.h instead of PhoneGapCommand.h
   
2. "Create a new command" means create a new .m file in your plugins folder, and then reference that file in Cordova.plist.  Maybe it's only me that didn't know this, but I doubt it.  :)
3. You need to change one of the lines of code:

• NSString* argPath = [ [arguments objectAtIndex:0] autorelease ]; 
  

• becomes

• NSString* argPath = [arguments objectAtIndex:0];

Once you do all this stuff, this plugin works exactly as advertised.  :)

On Sunday, July 8, 2012 11:25:14 PM UTC-4, Darrin Patey wrote:

I realize this is a couple years old now, but would this plugin still work?  I'm having zero luck getting it to work in a Cordova 1.5 implementation.  I've updated the 

#import "PhoneGapCommand.h" 

to 

#import "CDVPlugin.h" 

and added the plugin reference in Cordova.plist, but I just always get the same 2 errors:

2012-07-08 23:22:02.072 Olympics[7024:707] CDVPlugin class ImageHelper (pluginName: ImageHelper) does not exist.

2012-07-08 23:22:02.074 Olympics[7024:707] ERROR: Plugin 'ImageHelper' not found, or is not a CDVPlugin. Check your plugin mapping in Cordova.plist.

Or, even better, is there another way of achieving this basic task now in Cordova?

[Becka11y]

I guess it depends how you want to access the file after a reboot?  If you want the user to have access to the file you can use the SAVETOPHOTOALBUM CameraOption with the getPicture api.  You should check the quirks section of the documentation to make sure the platforms you need support this option (http://docs.phonegap.com/en/edge/cordova_camera_camera.md.html#cameraOptions_options). If you use the captureImage api the image is automatically saved to the photo album (on iOS at least).

If you as the developer need access to the file, use the FILE_URI option with getPicture() to have a file URI returned.  If you use the captureImage api you will always get a File path returned.  You can then use the FileApis to save this file to the PERSISTENT file storage.  You can then access that file again using the file apis.  You could also upload the returned file to a server using the file upload apis.  

There are code examples for using the File Apis within this google group and perhaps even the exact example you are looking for (although it was probably posted quite a long time ago).   

-becky

On Monday, September 10, 2012 4:44:14 PM UTC-4, Lindsay Manning wrote:

Hi there, I have read up and scoured the net for an elegant solution to this so I feel the need to visit this post again/
Is there a way to do this outside of XCode across devices yet?

I am now way over my 13th hour on this trying to store a photo to be retrieved when the app or phone is rebooted at a later date?

I tried writing the Base64 string to the database to retrieve later but there is a small size limit (I will have about 10 times 10 seconds of mp3 plus 2 photos to store for each run of the app so storing on a limited size database or jstorage is out of the question I think?)
I want to be able to load up previous runs and populate with older audio and photos, but looking at this post and other areas of the net, it seems impossible to do?

When I take a photo I can see it is in the tmp folder:
   file://localhost/var/mobile/Applications/BC094BE7-8A51-42F1-B5E3-79C0A6330D82/tmp/cdv_photo_001.jpg
but I want to get that out of there to somewhere that will still be there on a phone reboot? This is on all phones, not just iPhone.

Can somebody please please help me out on this one. I am almost flumoxed.

Cheers,

Lins.

[Max McLaughlin]

I'm not sure if anyone else is still following this, but I really need some help with this... I've been trying to get it to work for hours and I still can't get an image to save to the photo library. If there's anyone out there that could lend a hand with some detailed instructions on how to implement this it would be super appreciated.

[Phong Huynh]

In case someone need this. I converted it to an plugin here (Tested on Cordova 3.0): https://github.com/phongjalvn/cordova-imagehelper

Hope it help!