javascript - The above code is working fine for both chrome and firefox. But in IE this does not give save pop up box! What should I do to support this code ?? -

at first, add generated dataurl href attribute of <a> tag. on browsers, alone not trigger download, open linked image in new page.

download dialog base64 image:

<img src="data:image/png;base64,ivborw0kggoaaaansuheug...." class="image" /> 

based on above example, convert mime type of dataurl this:

<a href="data:application/octet-stream;base64,ivborw0kggoaaaansuheug....">download</a> 

telling browser data application/octet-stream, ask save on hard-disk.

---

specifying filename:

as adnan said in comments below (@adnan: upvoted yours big problem): there no standard way define filename using method, there 2 approaches might work in browsers.

a) download-attribute

<a download="image.png" href="..."> 

(introduced google crome)

b) defining http-headers within data-url
headers=content-disposition: attachment; filename=image.png

<a href="data:application/octet-stream;headers=content-disposition%3a%20attachment%3b%20filename=image.png;base64,ivborw0kggoaaaa"> 

(worked @ least in older versions of opera) here discussion this.

looking bug/feature-tracking systems of major browsers shows defining filename quite big wish of community. maybe see cross-browser compatible solution in near future! ;)

---

save ram , cpu ressources:

if don't want bloat ram of visitor's browser, can generate data-url dynamically:

<a id="dl" download="canvas.png">download canvas</a> 

function dlcanvas() {     var dt = canvas.todataurl('image/png');     this.href = dt; }; dl.addeventlistener('click', dlcanvas, false); 

this way, canvas may still shown image file browser. if want increase probability open download dialog, should extend function above, replacement shown above:

function dlcanvas() {     var dt = canvas.todataurl('image/png');     this.href = dt.replace(/^data:image\/[^;]/, 'data:application/octet-stream'); }; dl.addeventlistener('click', dlcanvas, false); 

at last, add http-header make shure browser offer valid filename you! ;)

---

full example:

var canvas = document.getelementbyid("cnv");  var ctx = canvas.getcontext("2d");    /* fill canvas image data */  function r(ctx, x, y, w, h, c) {    ctx.beginpath();    ctx.rect(x, y, w, h);    ctx.strokestyle = c;    ctx.stroke();  }  r(ctx, 0, 0, 32, 32, "black");  r(ctx, 4, 4, 16, 16, "red");  r(ctx, 8, 8, 16, 16, "green");  r(ctx, 12, 12, 16, 16, "blue");    /* register download handler */  /* convert canvas data url when user clicks.      saves ram , cpu ressources in case feature not required. */  function dlcanvas() {    var dt = canvas.todataurl('image/png');    /* change mime type trick browser downlaod file instead of displaying */    dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');      /* in addition <a>'s "download" attribute, can define http-style headers */    dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=content-disposition%3a%20attachment%3b%20filename=canvas.png');      this.href = dt;  };  document.getelementbyid("dl").addeventlistener('click', dlcanvas, false);

<canvas id="cnv" width="32" height="32"></canvas>  <a id="dl" download="canvas.png" href="#">download canvas</a>