KineticJS: How to make IE9 save canvas as image?

Question

I'm using this snippet to save canvas as image : when I click the button snapshot, id="snap", a new tab in FF (or window, in chrome) is opened and the image is called.

document.getElementById('snap').addEventListener('click', function () {
    stage.toDataURL({
        callback: function call (dataUrl) {
            window.open(dataUrl);
        },
        mimeType: 'image/png',
        quality: 1
    })
});

The problem is that IE9 gives me an error and does not show the file. The error says that there is a software needed to open the file. Honestly, I don't understand this error, what software is Microsoft talking about? If there's any solution or workaround please help.

Answer 1

It appears that there is no solution to do it in full JS in IE curently... A solution is available here, using a php query :

http://danielmclaren.com/node/90

<?php
/**
 * an example URL for viewing a base64-encoded image:
 * http://example.com/decode.php?image/png;base64,iVBORw0KGgoAAAANS...
 */
$data = split(";", $_SERVER["QUERY_STRING"]);
$type = $data[0];
$data = split(",", $data[1]);
header("Content-type: ".$type);
echo base64_decode($data[1]);
?>

Answer 2

I have not tested this solution in IE, but it works fine in Chrome 35.x.

Display the image on a jQueryUI dialog and prompt the user to perform right-click, save as.

Page code:

<script srv='jquery-ui.js'></script>

<div id='ImageExportDialog'></div>

Javascript:

$('#ImageExportDialog').dialog({autoOpen:false, modal:true});

Javascript:

document.getElementById('ImageExportDialog').src = canvas.toDataURL();