how to save DIV as Image with canvas2image with extension

Question

I have done the following code to convert HTML Content(DIV) to save as Image (JPEG, PNG,GIF Etc) with below code.

<pre>   
html2canvas($(".mainbox"), {
    onrendered: function(canvas) {
       theCanvas = canvas;
       document.body.appendChild(canvas);
       Canvas2Image.saveAsImage(canvas); 
       $("#FinalImage").append(canvas);
    }
});
</pre>  

I have also included html2canvas.js,base64.js and canvas2image.js in my page. At the end Image is shown in #FinalImage DIV and browser ask me to save it in my drive up to now all are working fine.

Now the question is name of the saved image has no Extension, every time I need to go to the image and assign the Extension(".jpg",".png" etc...). Is there any solution to set extension by default when user saves from the browser.

Thanks in advance.

Answer 1

I have done same functionality for capturing signature. This is different from your approach. but this code snippet may help you. plz comment if u need whole source code.

var canvas = document.getElementById(<canvas element id>)// get canvas element
var dataURL = canvas.toDataURL("image/png");// convert to img, specify extension
document.getElementById(<new image id>).src = dataURL; // write as an image

In line two I specified png.there you can change the extension of image. Hope it helps