图像正在下载铬,但不是在Safari浏览器

在我的应用程序中,我使用html2canvas将HTML转换为canvas,之后我将该canvas转换为使用toDataURL()的图像,每一件事情都很好,在页面加载后很快下载,但在safari中在同一页面中加载而无需下载。

 $(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", }); }); 

任何人都可以帮助我改变在Safari下载文件吗?

iOS限制

iOS有防止直接下载的限制(实际上几乎所有的格式),其中图像可以下载保持“触摸”。

最好的select是打开带有指令的“警报”,然后在警告之后用图像closures“window.open”。

查看替代“iOS”的代码

Safari中的BUG(PC和MAC – 非iOS – webkit技术没有问题,但在浏览器中)

我试着添加锚点,创build“ghost-iframe”,并replacemimetype: application/download

打开下载pipe理器,点击“保存”或“打开”后不能添加文件。

在我看来,这是一个在浏览器中的BUG(不是Webkit的问题,问题是Safari)。

见代码:

 $(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", }); }); 

替代解决scheme(不适用于iOS):

您将不得不将file upload到服务器,然后设置所需的标题进行下载,请参阅:

  • 上传图片
  • 使用.htaccess下载图片 (将“htaccess”添加到<canvas>.toDataURL生成的图片文件夹中)
  • 用PHP下载图片