Readers of this post have raised issues with the plugin. I have to personally check for the issues but while using the plugin if you find any issues, you might want to debug it in ADT. I will come up with a working plugin soon. Thanks.
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.
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
Continue reading “Save HTML5 Canvas Image to Gallery – Phonegap Android plugin”
Here is the code,
var canvasEl = document.createElement('canvas'); //create the canvas object
if(!canvasEl.getContext) //if the method is not supported, i.e canvas is not supported
document.write("HTML5 Canvas Not Supported By Your Browser");
As you can see in the first line I create a HTML5 Canvas element by using createElement() DOM method. As you might know that to work with Canvas, you have to get it’s context object (2d for now), which can be retrieved by the getContext() method. So, if a browser does not support the <canvas> tag or the canvas element, then no way the getContext() method will be defined for it. That’s what I check in the second line – the if condition. Remember that a function/method name is a variable which holds a reference to the function block. So we can check whether it is defined or not, in a normal way like we do for object properties. IE8 doesn’t support HTML5 Canvas. So try this code in IE8 for a quick test.
How can I use it with my code?
Use this code block inside the window load event handler or when the DOM ready event is triggered (using document.onreadystatechange, more). You can modify it as per your need.
Leave behind a comment if you are upset with this attempt.
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.
Continue reading “HTML5 Canvas – toDataURL() support for Android devices – working Phonegap 2.2.0 Plugin”
Continue reading “HTML5 Canvas Paint App for iPhone”