Save image as jpg with extension

Question

I'm using Backbone and html2canvas.js, this is the code I have so far for transforming a div to canvas and saving it. It works, but it doesn't add the .jpg extension. Because of this, after downloading the image, FF and Chrome first ask me about the program I want to use to open the file and IE just tells me that I don't have the right program and suggests visiting the store.

In FF and Chrome I can see the image when choosing the default Windows picture viewer etc.

What I would like to achieve is to add the .jpg extension so the file opens in the default program right away:

 savePicture: function() {
    //$(this.el).find('.drag-img').unwrap();
    var image = $(this.el).find('#droppable2');

    html2canvas(image, {
        onrendered: function(canvas) {
            var img = canvas.toDataURL("image/jpeg");


            var frame = document.getElementById("myHideFrame");
            if (!frame) {
                frame = document.createElement("iframe");
                frame.id = "myHideFrame";
                document.body.appendChild(frame);
            }
            frame.src = img.replace(/^data[:]image\/(png|jpg|jpeg)[;]/i, "data:application/octet-stream;");


        }
    });
},

Answer 1

Sadly, IE8 and above only supports data URIs in CSS, <link> , and <img> . So adding it to a frame as you are doing will not work.

Could you, for IE8 and above, put the data into an <img> and ask the user to right click and save the image?