图像被下载的Chrome但不是在野生动物园(image is downloading in chro

2019-10-19 11:17发布

在我的应用程序正在使用html2canvas在转换HTML到画布上,之后我使用的画布转换为图像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?

Answer 1:

iOS的限制

iOS的存在是防止直接下载(实际上几乎所有格式),其中图片可以下载举办“触摸”的限制。

这个最好的替代方法是打开一个“警告”的说明和警告后关闭调用“window.open”与图像。

查看代码的替代品“的iOS”

BUG在Safari(PC和MAC - 非iOS的 - 是在WebKit的技术没有问题,但在浏览器)

我想追加锚,打造“鬼IFRAME”和替换MIME类型: 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


文章来源: image is downloading in chrome but not in safari