0

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.

Sahar Ch.
  • 489
  • 1
  • 8
  • 28
  • I've make this http://fiddle.jshell.net/n7ge3/ ... and then I realize that I don't have IE. Hope it can help other people to try it faster however... (working with chrome) – FitzFish May 08 '14 at 03:00
  • With IE, your code just opens an empty tab, no image :( – Sahar Ch. May 08 '14 at 08:10

2 Answers2

0

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]);
?>
FitzFish
  • 8,557
  • 2
  • 30
  • 39
  • yeah, I saw a tutorial somewhere (more recent than that one) and it's the same concept: creating php page, etc... so I'll accept your answer. But for me, I'll leave the solution just like that because it's going to take some time. thanks :) – Sahar Ch. May 19 '14 at 08:26
0

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();

J Slick
  • 929
  • 11
  • 17