Save HTML5 Canvas Image to Gallery – Phonegap Android plugin

Update

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.
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

Read More »

HTML5 Canvas Support check using JavaScript – the simple way

This is how you can check for HTML5 Canvas support in your browser by using JavaScript, there’s no need of an external library like Modernizer to do a simple check like this. In fact most of the feature checks can be done natively, that’s what I prefer.

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");
  return;
}

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.

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 »

HTML5 Canvas Paint App for iPhone

While working on a project I created this simple HTML5 Canvas Paint application for mobile touch devices. It runs on mobile safari (iOS touch devices) and also runs on android devices, since both have web-kit browsers. The code is very simple. JavaScript touch events have been used to listen to user’s touch movements on the screen and then the co-ordinates of the move are recorded for drawing. Also I have a clear button to clear everything on the Canvas and redraw. No multiple color support for drawing is there in the app as of now. You can see a screenshot of the app below, ignore my drawing though, it’s too bad. After the screenshot, the full code is provided.

Click to open the demo.

Read More »