Saving Image to Android device’s Gallery – Phonegap Android

Update
Save HTML5 Canvas Image to Gallery – Phonegap Android plugin
I have a Phonegap Android plugin that helps to save HTML5 Canvas Image to the Gallery. See it here.

Now, back to the actual post,

Quick snippet of code that will help a Phonegap Android app to save an image to the Android device’s SD Card and make it available to the Gallery app to show. The title of this post may be misleading but note that when you save an image, you actually have to save it on the SD Card or the device’s memory. The Gallery is just an app that shows the collection of images from various locations on the SD Card. So, there’s nothing like saving an image directly to the Gallery.

Moreover I tried to save an image using the FileWriter – Phonegap API, but as it turned out, it can save only text data on the device’s memory. So, only way to do it was write a Phonegap plugin, pass the image data from JavaScript interface to the Java side and let the Java class save the image on the SD Card. Well I am not going to talk on the entire plugin, but I will share the Java code,

The methods below should be included inside your plugin’s Java class. The idea is simple, whatever be your image/ image data (eg. Base64 data), you take that image data and save it on the SD Card using the FileOutputStream. You get the file path by querying the external storage public directory which is the first line inside the savePhoto() method below. Now, after the image is saved you broadcast it through the System’s Media Scanner so that it becomes available to the Android Gallery app and to other apps. Hope this is clear, time for action now.

private String savePhoto(Bitmap bmp)
{
  //File imageFileFolder = new File(Environment.getExternalStorageDirectory(),"MyFolder"); //when you need to save the image inside your own folder in the SD Card
  File path = Environment.getExternalStoragePublicDirectory(
     Environment.DIRECTORY_PICTURES
  ); //this is the default location inside SD Card - Pictures folder
  //imageFileFolder.mkdir(); //when you create your own folder, you use this line.
  FileOutputStream out = null;
  Calendar c = Calendar.getInstance();
  String date = fromInt(c.get(Calendar.MONTH))
  + fromInt(c.get(Calendar.DAY_OF_MONTH))
  + fromInt(c.get(Calendar.YEAR))
  + fromInt(c.get(Calendar.HOUR_OF_DAY))
  + fromInt(c.get(Calendar.MINUTE))
  + fromInt(c.get(Calendar.SECOND));
  File imageFileName = new File(path, date.toString() + ".jpg"); //imageFileFolder
  try
  {
    out = new FileOutputStream(imageFileName);
    bmp.compress(Bitmap.CompressFormat.JPEG, 100, out);
    out.flush();
    out.close();
    scanPhoto(imageFileName.toString());
    out = null;
  } catch (Exception e)
  {
    e.printStackTrace();
  }
  return imageFileName.toString();
}
private String fromInt(int val)
{
  return String.valueOf(val);
}

/* invoke the system's media scanner to add your photo to the Media Provider's database,
* making it available in the Android Gallery application and to other apps. */
private void scanPhoto(String imageFileName)
{
  Intent mediaScanIntent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);
  File f = new File(imageFileName);
  Uri contentUri = Uri.fromFile(f);
  mediaScanIntent.setData(contentUri);
  //this.cordova.getContext().sendBroadcast(mediaScanIntent); //this is deprecated
  this.cordova.getActivity().sendBroadcast(mediaScanIntent); 
}

Note that I am not a Java developer, and you may need to modify this code as per your needs. But it should work. First save your image (create a Phonegap Android app and test it) and after that you can see it being displayed in the gallery app. I did collect this code by browsing the net and made it work 100%. Otherwise it was difficult for me, since I did not find any concrete answer on this. Leave a suggestion if there is a better solution.

Advertisements

HTML5 Canvas – toDataURL() support for Android devices – working Phonegap 2.2.0 Plugin

Update
Save HTML5 Canvas Image to Gallery – Phonegap Android plugin
I have a Phonegap Android plugin that helps to save HTML5 Canvas Image to the Gallery. See it here.

Back to the actual post,

I have been working on a Phonegap based Android app which involves the HTML5 Canvas. So this is what I had been trying for some time – get a png/jpeg image of the Canvas (its a Canvas paint app, something like this and I want to get an image of the drawing..) and then upload the image to Facebook on a user’s album. Let me tell you, it has been a heck of a task and around 15-20 days of restlessness.

The problem stood tall when I discovered that for Android 2.3 (in general Android < 4.0) devices the native HTML5 Canvas- toDataURL() function does not work, which would otherwise give a base64 encoded string  as image data which then can be used as a source for a HTML <img /> tag. It was working for 4.0 devices as I tested it on a Samsung Galaxy S3 and a Samsung Tab. Hence I Goggled a bit and found out various people had this issue before. So it seemed that older Android web-kits (a Phonegap app runs on the Android webview which is actually the webkit browser inside a native wrapper) does not support that native method of converting a Canvas to an image through toDataURL() generated base64 encoded strings. Guess what I had todo? I had to go for a custom Phonegap plugin as there was no other way. This is how I thought of implementing it – pass the canvas object from javascript side to the Phonegap plugin’s Java class and somehow get the base64 encoded string of the Canvas and return it back to javascript as the callback parameter. This is what the native toDataURL() method actually does – convert the Canvas to a base64 encoded image data string.

Read More »