图像正在下载铬,但不是在野生动物园

Question

在我的应用程序中,我html2canvas用于将HTML转换为画布,之后我将使用toDataURL()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技术中没有问题,但在浏览器中)

我尝试追加锚点,创建"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中不起作用):

您必须将文件上传到服务器,然后设置所需的标题以供下载,请参阅:

• 上传图片
• 使用.htaccess下载图像(添加"htaccess"只是生成图像的文件夹<canvas>.toDataURL)
• 用PHP下载图像