Sometime back I worked on a Phonegap Android plugin that helps to save an HTML5 Canvas Image to the device’s gallery. Well, 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. I had this working with Phonegap 2.2.0 (the version that I used). Newer versions of Phonegap/Cordova are available and things might have changed a bit, specially in the way custom plugins are written. Hence, if you are using newer versions of Phonegap you should have a look at the official documentation before proceeding. Alright, here is what I did. 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 Canvas details from JavaScript interface to the Java side and let the Java class save the Canvas image on the SD Card. Note that I am not a Java developer, and there may be better ways of writing this plugin. For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2013/06/19/save-html5-canvas-image-to-gallery-phonegap-android-plugin/

1. Save HTML5 Canvas Image to Gallery
– Phonegap Android plugin
Actual blog post link: http://jbkflex.wordpress.com/2013/06/19/save-html5-canvas-image-to-gallery-
phonegap-android-plugin/
Sometime back I worked on a Phonegap Android plugin that helps to save an HTML5
Canvas Image to the device’s gallery. Well, 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.
I had this working with Phonegap 2.2.0 (the version that I used). Newer versions of
Phonegap/Cordova are available and things might have changed a bit, specially in the way
custom plugins are written. Hence, if you are using newer versions of Phonegap you should have
a look at the official documentation before proceeding.
Alright, here is what I did. 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 Canvas details from JavaScript interface to the Java side and let the
Java class save the Canvas image on the SD Card.
Note that I am not a Java developer, and there may be better ways of writing this plugin.
How to install the plugin?
You need to get hold of two files :
1) The Java class – SavePhotoPlugin.java
2) The JavaScript interface – SavePhotoPlugin.js
Both files and project details are available on Github. So go to the
repo :https://github.com/jsphkhan/rialabphonegap/tree/master/android and grab the files under
the folder - Save HTML5 Canvas Image to Gallery
With both the files ready, let’s see how to use it and get it working. Firstly you have to add these
two files to your Phonegap Android project. Add the SavePhotoPlugin.js file
inside assets/www/ folder and provide a reference to it in your index.htmlfile, like this
<script type="text/javascript" charset="utf-8"
src="SavePhotoPlugin.js"></script>

2. Then create a directory inside your project’s src folder that matches the package name
of SavePhotoPlugin.java class. For our case make a directory
– /org/apache/cordova/plugin inside src and then paste SavePhotoPlugin.java inside it. If
you change the package name, make sure to change the directory structure as well. The package
name can be found at the top of SavePhotoPlugin.java file.
Next thing to do is to register the plugin in the config file – open res/xml/config.xml and then
add the plugin details given below to the <plugins></plugins> section of the XML file. The
name attribute is the Java class name and the value is the path of the class which should match
the package name.
<plugin name="SavePhotoPlugin"
value="org.apache.cordova.plugin.SavePhotoPlugin"/>
And then call the plugin inside your javascript (your script.js file or app.js, whatever you have
named it) code like this. (You can call this inside a button click handler or so),
var canvas = document.getElementById("your_canvas_id");
window.savephotoplugin(canvas,"image/png",device.version,function(val){
//returns you the saved path in val
alert("Photo Saved: " + val);
});
If everything goes fine, you will see an alert box with the path of the saved image. For Android
version greater than 2.3.3, the Canvas image will be saved at /mnt/sdcard/Pictures folder. And
for Android lesser than or equals to 2.3.3 the image will be saved at /mnt/sdcard. For both cases
the saved image will appear in the device Gallery. For this, I invoke the device’s media
scanner to add the saved image to the Media Provider’s database, thereby making it available in
the device Gallery and to other apps.

3. Right now, I have hard coded the mime-type of the saved image to be a .png image (this was my
requirement). You can easily change it as per your need to image/png or image/jpeg in the call
to window.savephotoplugin() and the corresponding type of image will be saved in your device.
Check out the source code of both the plugin’s file and you would understand better.
Update:
HTML5 Canvas – toDataURL() support for Android devices – working Phonegap 2.2.0
Plugin
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. So I have a plugin which provides native support for low end Android versions and
gives you a base64 encoded string of your HTML5 Canvas image. Check it out here.