Question

我正在使用html2canvas在我的网络应用程序中启用div的屏幕截图。它在Chrome（包括Android），Safari（包括iOS）和FireFox中运行良好。但是在IE 11中，图像不会保存。

代码如下所示：

function displayModalWithImage(canvas, filename) {

    var modalcontainer = $('#snapshot');
    var modalcontainer_body = modalcontainer.children().find('.snap_shot_container');
    var modalcontainer_save = modalcontainer.children().find('.save_snapshot');

    var image = new Image();
    var data = canvas.toDataURL("image/png");
    image.src = data;

    modalcontainer_save.attr('download', filename +".png");
    modalcontainer_save.attr('href', 
        data.replace(/^data[:]image\/png[;]/i, "data:application/octet-stream;"));
    $(modalcontainer_body).html('');
    $(image).appendTo(modalcontainer_body);
    $(modalcontainer_save).on('click', function() {
        modalcontainer.modal('hide');
    });

    modalcontainer.modal();
}

浏览器行为有所不同：

Chrome：显示模式，然后在单击“保存”时保存文件。（可接受的）
Firefox：显示模态，然后在单击“保存”（可接受）时显示单独的对话框
Safari：显示模式，然后在单击“保存”时单独选项卡中加载图像（可接受...也许）
IE 11：显示模态，但在点击“保存”（不可接受）时隐藏对话框

另一个SO答案提示data.replace，但它似乎对任何浏览器的行为都没有任何影响。以前，href属性只是设置为数据。

所以，无论如何，此时用简单的window.location = data替换模态对话框是一种可行的选择。但是，由于Chrome运行良好且Safari和FF运行良好，我想简单地为IE浏览器进行window.location的功能检测，但显示其他浏览器的模式。但是，我不知道IE中缺少什么“功能”来检查。

TL;博士

我的javascript中只有一个更改或错误，可以让IE工作（将编码为数据的图像保存到文件中）。
如果没有，我应该检测IE中的哪个功能，这将使我能够自定义IE的行为
如果那不是一个选择;目前老式浏览器检测的最佳实践是什么？

<a href="data:..."> support?</a>的JQuery特征检测

0 个答案: