Download a Html5 canvas element as an image with the file extension with Javascript

Question

I would like to be able to download a Html5 canvas element as an image with the file extension with Javascript.

The CanvasToImage library does not seem to be able to

Answer 1

Hi i have created a jquery plugin which will let you do the same task with ease but it also make use of php to download the image. let me explain how it works

Plugin has 2 sub function that you can call independently to add image to the canvas and the other one is to download the current image lying on the canvas.

Add image to the canvas

For this you need to pass the id of the canvas element and the path of the image you want to add

download image from the canvas

For this you need to pass the id of the canvas element

 $('body').CanvasToPhp.upload({
    canvasId: "canvas",   // passing the canvasId
    image: "455.jpg"      // passing the image path
});

// downloading file
$('#download').click(function(){
    $('body').CanvasToPhp.download({
        canvasId: "canvas"   // passing the canvas id
    });  // 
});

First you need to download the plugin file which you can find here http://www.thetutlage.com/post=TUT213

I have also created a little demo http://thetutlage.com/demo/canvasImageDownload