图像正在下载铬，但不是在Safari浏览器 [英] image is downloading in chrome but not in safari

问题描述

在我的应用程序中，我使用 html2canvas 将HTML转换为canvas，然后使用将数据转换为图像toDataURL （）页面加载后很快就会下载图片，但Safari浏览器会将图片加载到同一页面而无需下载。

In my application I'm using html2canvas for converting a HTML in to canvas and after that i'm converting that canvas to image using toDataURL() 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",
    });
});

任何人都可以帮助我在Safari中下载文件吗？

Can anybody help me what i nee to change to download the file in Safari?

推荐答案

iOS限制

iOS 阻止直接下载（实际上几乎所有格式），其中图像可以下载保持触摸。

iOS limitations

The iOS there are limitations which prevent direct download (practically almost all formats), where images can be downloaded holding the "touch".

最好的替代方案是打开一个警报指令和提醒后关闭与图像的window.open。

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.

查看替代iOS的代码

我尝试追加锚点，创建ghost-iframe并替换mimetype： application / download 。

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".

我认为这是浏览器中的BUG（不是Webkit的问题，问题是Safari浏览器）。

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

替代解决方案（不适用于iOS）：

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:

• 上传图片


• 使用.htaccess下载图片（添加htaccess只是文件夹图像由< canvas> .toDataURL ）

• Upload image
• Download image with .htaccess (add "htaccess" just the folder that the images are generated by <canvas>.toDataURL)
• Download image with PHP

这篇关于图像正在下载铬，但不是在Safari浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！