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?

Did you make sure that the data URL worked? If so, try creating an `` tag in the DOM and loading the data URL there. [IE won't let you load data URLs in the address bar](https://stackoverflow.com/a/8453636/689161). — gengkev, Aug 28 '15 at 01:01
Sorry - wish there was a way to indicate your coding level! I'm very fresh to this and have got in over my head already! I'm not sure how to check that the data URL worked.... going to do some reading now! — nzdavo, Aug 28 '15 at 01:35
I just wasn't sure if IE was actually capable of generating the data URL that you wanted; `console.log(img)` should be enough. — gengkev, Aug 28 '15 at 01:39
Ok - no there was no data URL showing in IE. In Firefox I have a massive amount of it. — nzdavo, Aug 28 '15 at 01:40

score 0 · Accepted Answer · edited May 23 '17 at 12:14

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>

save canvas as jpeg with Internet Explorer

1 Answers1