Save html5 canvas element to file (local)

I'm doing a webapp on Android, and I've a HTML5 Canvas on which an user can draw what he wants using touch events. And I would like to save this on a sdcard, so in local. And can't use any server side script (php etc) to do that stuff.

I'm using a magictouch.js example :

    <canvas id="example" height=450 width=300></canvas> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" src="magictouch.js"></script>

    <script> 

    var CanvasDrawr = function(options) {

    var canvas = document.getElementById(options.id),
    ctxt = canvas.getContext("2d");
    var img     = canvas.toDataURL("image/png");


    ctxt.lineWidth = options.size || Math.ceil(Math.random() * 35);
    ctxt.lineCap = options.lineCap || "round";
    ctxt.pX = undefined;
    ctxt.pY = undefined;

    var lines = [,,];
     var offset = $(canvas).offset();

    var self = {
    //bind click events
    init: function() {

    canvas.addEventListener('touchstart', self.preDraw, false);
    canvas.addEventListener('touchmove', self.draw, false);

    },

    preDraw: function(event) {
            $.each(event.touches, function(i, touch) {
              var id = touch.identifier;
              lines[id] = { x     : this.pageX - offset.left, 
                y     : this.pageY - offset.top, 
                color : options.color || ["black"] 
              };
    });

    event.preventDefault();
  },

  draw: function(event) {
    var e = event, hmm = {};

    $.each(event.touches, function(i, touch) {
      var id = touch.identifier;
      var moveX = this.pageX - offset.left - lines[id].x,
      moveY = this.pageY - offset.top - lines[id].y;

      var ret = self.move(id, moveX, moveY);
      lines[id].x = ret.x;
      lines[id].y = ret.y;
    });

    event.preventDefault();
  },

  move: function(i, changeX, changeY) {
    ctxt.strokeStyle = lines[i].color;
    ctxt.beginPath();
    ctxt.moveTo(lines[i].x, lines[i].y);

    ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY);
    ctxt.stroke();
    ctxt.closePath();

    retur开发者_开发技巧n { x: lines[i].x + changeX, y: lines[i].y + changeY };
  }
};

    return self.init();
    };

    $(function(){
var super_awesome_multitouch_drawing_canvas_thingy = new CanvasDrawr({id:"example", size: 2 }); 
console.log('loaded');
      });

    </script> 
    </body>

But all examples which I met on Internet were used with a php script on a server to decode and save the canva as an image. And actually just want to do that on my Android device, in my sdcard, by just using HTML5/Javascript...

Thanks.

Did you check nihilogic library ? http://www.nihilogic.dk/labs/canvas2image/

It use toDataUrl() function so you may get an ugly name of pictures but still you will have a picture.

You also can use downloadify but it use flash and I know flash is not often on android, depend your case https://github.com/dcneiner/Downloadify

Also I, like kbok, don't know phoneGap but you could probably try to use both context.toDataUrl() and fwrite.

This is not possible since you do not have access to the filesystem from a web page (Except some edge cases, which are not useful here).

What I would advise, of course, is to use the server to generate this file. Since it's not possible, you may find a way to execute "native" code on the client by using a plugin, or a Java applet.

Why don't you convert the to an image on the server side and then allow the user to download the image onto their phone?