Your SlideShare is downloading. ×
Save HTML5 Canvas Image to Gallery – Phonegap Android plugin
Save HTML5 Canvas Image to Gallery – Phonegap Android plugin
Save HTML5 Canvas Image to Gallery – Phonegap Android plugin
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Save HTML5 Canvas Image to Gallery – Phonegap Android plugin

1,806

Published on

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 …

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/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,806
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Save HTML5 Canvas Image to Gallery– Phonegap Android pluginActual 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 HTML5Canvas Image to the device’s gallery. Well, the title of this post may be misleading but notethat when you save an image, you actually have to save it on the SD Card or the device’smemory. The Gallery is just an app that shows the collection of images from various locations onthe 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 ofPhonegap/Cordova are available and things might have changed a bit, specially in the waycustom plugins are written. Hence, if you are using newer versions of Phonegap you should havea 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 itturned out, it can save only text data on the device’s memory. So, only way to do it was write aPhonegap plugin, pass the Canvas details from JavaScript interface to the Java side and let theJava 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.java2) The JavaScript interface – SavePhotoPlugin.jsBoth files and project details are available on Github. So go to therepo :https://github.com/jsphkhan/rialabphonegap/tree/master/android and grab the files underthe folder - Save HTML5 Canvas Image to GalleryWith both the files ready, let’s see how to use it and get it working. Firstly you have to add thesetwo files to your Phonegap Android project. Add the SavePhotoPlugin.js fileinside 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 nameof SavePhotoPlugin.java class. For our case make a directory– /org/apache/cordova/plugin inside src and then paste SavePhotoPlugin.java inside it. Ifyou change the package name, make sure to change the directory structure as well. The packagename 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 thenadd the plugin details given below to the <plugins></plugins> section of the XML file. Thename attribute is the Java class name and the value is the path of the class which should matchthe 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 havenamed 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 valalert("Photo Saved: " + val);});If everything goes fine, you will see an alert box with the path of the saved image. For Androidversion greater than 2.3.3, the Canvas image will be saved at /mnt/sdcard/Pictures folder. Andfor Android lesser than or equals to 2.3.3 the image will be saved at /mnt/sdcard. For both casesthe saved image will appear in the device Gallery. For this, I invoke the device’s mediascanner to add the saved image to the Media Provider’s database, thereby making it available inthe 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 myrequirement). You can easily change it as per your need to image/png or image/jpeg in the callto 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.0PluginFor 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 asimage data. So I have a plugin which provides native support for low end Android versions andgives you a base64 encoded string of your HTML5 Canvas image. Check it out here.

×