5

The following code works well for Google Chrome but not for IE11.

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <img id="img1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAASUlEQVRo3u3PAQ0AIAwDsIGC+TcL
LkhOWgddSU6Ga5udT4iIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIi8cQEjUgGT
mE6z3QAAAABJRU5ErkJggg==" />
    <script>
        var a = document.createElement('a');
        var image = document.getElementById('img1');
        a.setAttribute('href', image.src);
        a.setAttribute("download", 'fileName');
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    </script>
</body>
</html>

When I run this code in IE11 I've got message: "Do you want to allow this website to open an app on your computer?"

After clicking "Allow" I've got "No apps are installed to open this type of link (data)"

How to make it work in IE11?

31415926
  • 3,811
  • 7
  • 47
  • 78
  • It just means you do not have an application that can handle the data: protocol installed in IE. I get HTML1300: Navigation occurred. File: unknownprotocol.htm – mplungjan Mar 26 '14 at 15:12
  • @mplungjan, so how to make it work? – 31415926 Mar 26 '14 at 15:25
  • Install a handler of the data protocol on your IE? - Read the comments here http://msdn.microsoft.com/en-us/library/cc848897(v=vs.85).aspx – mplungjan Mar 26 '14 at 15:35
  • 1
    No. Apparently it's IE limitation. From http://msdn.microsoft.com/en-us/library/cc848897(v=vs.85).aspx *"For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements."* – Yuriy Galanter Mar 26 '14 at 15:37
  • @Yuriy Galanter, what alternative to this code can I use in IE11? – 31415926 Mar 26 '14 at 15:44
  • Send it to the server, decode it and serve it back as image/png or application/octet-stream – mplungjan Mar 26 '14 at 15:45
  • Agree with @mplungjan see my answer as to why. – Yuriy Galanter Mar 26 '14 at 15:47

2 Answers2

8

This one is usefull for IE10+: http://msdn.microsoft.com/en-us/library/hh779016(v=vs.85).aspx

something like:

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <img id="img1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAASUlEQVRo3u3PAQ0AIAwDsIGC+TcL
LkhOWgddSU6Ga5udT4iIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIi8cQEjUgGT
mE6z3QAAAABJRU5ErkJggg==" />
    <canvas id="canvas1"></canvas>
    <script>
        var image = document.getElementById('img1');
        var canvas = document.getElementById('canvas1');
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, image.width, image.height);
        window.navigator.msSaveBlob(canvas.msToBlob(), 'drawingFileName.png');
    </script>
</body>
</html>
31415926
  • 3,811
  • 7
  • 47
  • 78
2

You cannot use this approach in IE, since even as of version 11 it doesn't suppport "download" attribute of anchor element: http://caniuse.com/download

You will have to resort to server-side to generate the image and send it to the client

Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
  • I'm developing an app for win8 store so I don't have server. The code should be able to save on-fly-generated images to user's hard drive. Any ideas of how to do that? – 31415926 Mar 26 '14 at 16:01
  • Not off the top of my head not for HTML/JS. Can it be a native Win8 app? – Yuriy Galanter Mar 26 '14 at 16:11
  • See if this helps: http://hackworthy.blogspot.com/2012/05/savedownload-data-generated-in.html I haven't read into details, but looks like cross-browser support – Yuriy Galanter Mar 26 '14 at 16:46
  • I forgot blob!!! http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata – mplungjan Mar 26 '14 at 16:56