save canvas as jpeg with Internet Explorer

Question

I'm using canvas2image to save a 'composite' image. It opens in a new window and can be right clicked and saved. This worked great so I presented it to the client who was running IE and of course it didn't work for him!

I have read just about everything related to this on Stackoverflow but not getting anywhere.

How can I get IE to open the canvas and let me save it?

Here is the script I'm using:

$('#save_image_locally').click(function(){

        html2canvas($('#picture_frame'), 
         {
            onrendered: function (canvas) {
                var img = canvas.toDataURL("image/png");
                alert('Your image will open in a new window. Please right click the image and save.');
                window.open(img);
            }
         });
        });

The new window opens is IE but it's blank. I also tried opening the canvas in a div on the same page which works great but IE won't let me right click and save?

Answer 1

Got it! Many thanks to Karl and his post here

The work-around is to use html2canvas.js, filesaver.js and canvas-toBlob.js for compatibility polyfilling.

For those like me who need more info:

Download the libraries above and then place this inside your head tags:

   <script type="text/javascript" src="html2canvas.js"></script>
   <script type="text/javascript" src="FileSaver.js"></script>
   <script type="text/javascript" src="canvas-toBlob.js"></script>

Then I set up the html:

<button id="save_image_locally">download img</button>
<div id="imagesave" style="height:200px; width:200px;">
<img id='local_image' src='http://www.example.com/Images/Example.jpg'>
</div>

Finally here is the script to force IE (and other browsers) to save canvas as an image:

<script>
$('#save_image_locally').click(function(){
html2canvas($('#imagesave'), {
onrendered: function(canvas) {
var img = canvas.toDataURL()
canvas.toBlob(function(blob) {
saveAs(blob, "savedcanvasimage.jpeg");
}, "image/jpeg");
}
});
});
</script>