image is downloading in chrome but not in safari
iOS limitations
The iOS there are limitations which prevent direct download (practically almost all formats), where images can be downloaded holding the "touch".
The best alternative to this would be to open an "alert" with instructions and after the alert to close call "window.open" with the image.
See the code with an alternative to "iOS"
BUG in Safari (PC and MAC - non iOS - is no problem in webkit technology, but in the browser)
I tried append anchor, create "ghost-iframe" and replace mimetype: application/download
.
Download manager open, but not add file after click in "Save" or "Open".
In my opinion this is a BUG in Browser (not is an issue of Webkit, the issue is of Safari).
See code:
$(document).ready(function(e) {
var ghostFrame = document.createElement("iframe");
ghostFrame.name = "myFrame";
document.body.appendChild(ghostFrame);
html2canvas(document.body, {
onrendered: function(canvas) {
var test = document.getElementsByClassName('test'); //finding the div.test in the page
$(test).append(canvas); //appending the canvas to the div
var canvas = document.getElementsByTagName('canvas');
$(canvas).attr('id','test'); //assigning an id to the canvas
var can2 = document.getElementById("test");
var dataURL = can2.toDataURL("image/png");
document.getElementById("image_test").src = dataURL; //assigning the url to the image
$(canvas).remove(); //removing the canvas from the page
var tempLink = document.createElement('a'), e;
tempLink.download = 'untitled.png';
if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { //iOS = Iphone, Ipad, etc.
alert("Instructions...");
tempLink.target = "_blank";
tempLink.href = dataURL;
} else {
tempLink.target = ghostFrame.name;
tempLink.href = dataURL.replace(/^data[:]image\/png[;]/i, "data:application/download;");//force download
}
if (document.createEvent) // create a "fake" click-event to trigger the download
{
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
tempLink.dispatchEvent(e);
} else if (tempLink.fireEvent) {
tempLink.fireEvent("onclick");
}
},
logging:true,
background: "#fff",
});
});
Alternative solution (not work in iOS):
You will have to upload the file to the server and then set the required headers for download, see:
- Upload image
-
Download image with .htaccess (add "htaccess" just the folder that the images are generated by
<canvas>.toDataURL
) - Download image with PHP
Comments
-
Ram's almost 2 years
In my application I'm using
html2canvas
for converting a HTML in to canvas and after that i'm converting that canvas to image usingtoDataURL()
every thing fine in chrome the image is downloading soon after the page loads, but in safari the image loading in a the same page without downloading.$(document).ready(function(e) { html2canvas(document.body, { onrendered: function(canvas) { var test = document.getElementsByClassName('test'); //finding the div.test in the page $(test).append(canvas); //appending the canvas to the div var canvas = document.getElementsByTagName('canvas'); $(canvas).attr('id','test'); //assigning an id to the canvas var can2 = document.getElementById("test"); var dataURL = can2.toDataURL("image/png"); document.getElementById("image_test").src = dataURL; //assigning the url to the image $(canvas).remove(); //removing the canvas from the page download(can2,'untitled.png'); function download(canvas_name,filename) { var tempLink = document.createElement('a'); e; tempLink.download = filename; tempLink.href = dataURL; if (document.createEvent) // create a "fake" click-event to trigger the download { e = document.createEvent("MouseEvents"); e.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false,false, 0, null); tempLink.dispatchEvent(e); } else if (tempLink.fireEvent) { tempLink.fireEvent("onclick"); } } },logging:true,background: "#fff", }); });
Can anybody help me what i nee to change to download the file in Safari?
-
Guilherme Nascimento about 9 yearsHi! My answer solve your problem? If so check as "correct", if not tell me what is missing.
-
software.wikipedia over 7 yearsOne more answer on another thread seems to work on my Safari - it has a working sample - stackoverflow.com/questions/12796513/html5-canvas-to-png-file
-
-
Ram's about 10 yearsThanks @Guilherme Nascimento but is there any way to save the image in ipad if i run this script in ipad.
-
Guilherme Nascimento about 10 yearsYou should have entered this in question. Apparently it's a limitation of the "IOS" to prevent unsolicited requests. See my answer, I edited! Good luck