If there is a any image rendered in brower. I have given a link to download that image with customized name. But in safari file is downloaded with unknown name. In other browser it works fine.
What I got. In safari download attribute of link does not support. Becuase of that all files is getting downloaded with unknown file name In that how can i give a name to downloaded file.
/* I have tried this code.*/
<!DOCTYPE html>
<html>
<body onload="myFunct">
<canvas id="cnv" width="32" height="32"></canvas>
<a id="dl" download="Canvas.png" href="#" onClick="dlCanvas">Download Canvas</a>
<script>
function myFunct() {
var canvas = document.getElementById("cnv");
var ctx = canvas.getContext("2d");
/* FILL CANVAS WITH 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");
document.getElementById("dl").addEventListener('click', dlCanvas, false);
}
/* REGISTER DOWNLOAD HANDLER */
/* Only convert the canvas to Data URL when the user clicks.
This saves RAM and CPU ressources in case this feature is not required. */
function dlCanvas() {
var dt = canvas.toDataURL('image/png');
/* Change MIME type to trick the browser to downlaod the file instead of displaying it */
dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
/* In addition to <a>'s "download" attribute, you 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;
};
</script>
</body>
</html>
