javascript - 图片在 chrome 中下载，但在 safari 中不下载

Question

在我的应用程序中，我使用 html2canvas 将 HTML 转换为 Canvas ，然后我使用 toDataURL() 将该 Canvas 转换为图像，一切正常在 chrome 中，图像在页面加载后立即下载，但在 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 中下载文件需要更改什么吗？

Answer 1

iOS 限制

iOS 存在阻止直接下载(实际上几乎所有格式)的限制，其中可以按住“触摸”来下载图像。

最好的替代方法是打开带有说明的“警报”，并在警报关闭后调用带有图像的“window.open”。

查看“iOS”替代代码

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

我尝试附加 anchor ，创建“ghost-iframe”并替换 mimetype:application/download .

下载管理器打开，但点击“保存”或“打开”后不添加文件。

在我看来，这是浏览器中的一个 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",
    });
});

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

您必须将文件上传到服务器，然后设置下载所需的 header ，请参阅:

• > Upload image
• > Download image with .htaccess (添加“htaccess”只是图像由 <canvas>.toDataURL 生成的文件夹)
• > Download image with PHP