Phonegap: How to save a HTML5 canvas as image to device photo gallery/library

Question

Hey I am developing an app that could tag an image with the geolocation and the time stamp, using Phonegap. I have been able to tag the image by editing the image as a canvas. Now I need to save that edited image to the device Photo gallery/library as a new image or replace the image selected to be tagged. The purpose of using phonegap is that the application must function cross-platform. Is there any way this could be achieved ?

The following code edit the image as canvas and converts the image back to a Data URI.

var canvas = document.getElementById("canvasPnl");
        var context = canvas.getContext("2d");
        var imageObj = new Image();
        imageObj.onload = function(){

        context.drawImage(imageObj,0,0,300,300 );
        context.fillStyle="#FFFFFF";
        context.fillText('Latitude: '+ lat.toString()+' Longitude: '+ lon.toString(), 0, 10);
        context.fillText(new Date(), 0, 20);
        };
        imageObj.src=imageURI;
        dataURI= canvas.toDataURL();

Can this be converted to an image object and saved to phone gallery???

Answer 1

I don't think you can make the image save in the gallery using just JavaScript but you can send the user to the image or display the image where the user can manually save it.