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

Question

在我的应用程序中，我正在使用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 存在一些限制，这些限制会阻止直接下载（几乎所有格式），可以通过＆＃34; touch＆＃34;来下载图像。

最好的替代方案是打开一个＆＃34;警报＆＃34;有说明和警报后关闭电话＆＃34; window.open＆＃34;与图像。

使用＆＃34; iOS＆＃34;

的替代方法查看代码

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

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

下载经理打开，但点击后不添加文件＆＃34;保存＆＃34;或＆＃34;打开＆＃34;。

在我看来，这是浏览器中的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中不起作用）：

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

• Upload image
• Download image with .htaccess（添加＆＃34; htaccess＆＃34;只是<canvas>.toDataURL生成图片的文件夹）
• Download image with PHP