Question

我有一个显示深度缩放图像的seadragon画布。

viewer.addHandler('open', function() {                  
    var downloadlink = document.getElementById("download");
    $(downloadlink).on("click", function() {
        var img = viewer.drawer.canvas.toDataURL("image/png");
        if (document.getElementById("as-original").checked) {
            AWS.config.update({accessKeyId: '@Model.AccessId', secretAccessKey: '@Model.AccessKey'});
            AWS.config.region = 'us-east-1';
            var s3 = new AWS.S3();
            var params = {Bucket: '@Model.OriginalsBucket', Key: '@Model.OriginalsKey'};
            s3.getSignedUrl('getObject', params, function (err, urlS3) {
                img = urlS3;
            });
        }
        downloadlink.href = img;
        alert(img);
        downloadlink.download = '@Model.DatabaseName';
        alert(downloadlink.download);            
    });
});

下载按钮适用于除IE 11以外的所有浏览器。有两个下载选项，用于下载当前显示在画布上的图像（根据需要放大并定位），或下载原始文件。两者在所有其他浏览器上的工作方式相同，但在IE中，

（1）使用＆＃34; as-original＆＃34;没检查，没有任何反应。这两个警报都会消失，所以我可以看到代码中没有任何内容......一旦代码完成，它就无法执行任何操作。我添加了

 window.location.href = img;

到最后但它仍然没有做任何事情。

（2）＆＃34; as-original＆＃34;检查后，在downloadlink.download之后，加载了一个显示图像的新页面，但没有下载，页面没有显示任何下载或打印选项/对话框，什么也没有。只是在其他空白页面上的静态图像。

Answer 1

Internet Explorer目前不支持download属性，但目前在http://status.modern.ie上列为正在考虑。此外，您无法使用dataURI作为可导航内容来阻止利用dataURI的certain phishing techniques。

如果您要将文件下载到用户的计算机上，则应使用适当的API：navigator.msSaveBlob或navigator.msSaveOrOpenBlob。

Answer 2

我找到了一个有效的解决方案。你需要canvas-toBlob.js和FileSaver.js。此方法能够在IE上打开/保存图像而无需打开任何新标签，也不会遇到任何受污染的画布问题（因为我的许多图像来自其他来源）。

$(downloadlink).on("click", function() {
    var img = viewer.drawer.canvas.toDataURL("image/png");
    if (document.getElementById("as-original").checked)
        img = url.substr(0, url.lastIndexOf('/') + 1) + '$dist';


    // detect browser
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { // If Internet Explorer, return version number
        $(".line-bg").append("<img style='display:none' id='myImage' src='" + img + "' alt='from canvas'/><canvas id='myCanvas' width='1138' height='598' style='display:none;border:1px solid #cccccc'></canvas>");
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');
        var imgDupe = document.getElementById('myImage');
        ctx.drawImage(imgDupe, 10, 10);
        c.toBlob(function(blob) {
            saveAs(blob, '@Model.DatabaseName' + '.jpg');
        });
        } else {
            downloadlink.href = img;
            downloadlink.download = '@Model.DatabaseName';
    }
});

我完成了创建新图像和画布的步骤，原因有以下几点：（1）我尝试下载当前出现在我的seadragon画布上的图像，即根据需要放大/定位。因此我抓住canvas.toDataUrl（），并将其显示在一个新的画布中，该画布将转换为blob。（2）我在画布上有交叉原始图像，因此新的图像/画布处理可以解决任何潜在的污染画布问题。

如果您不使用seadragon并且只有常规画布，则可以使用var c = document.getElementById（＆＃39; [original canvas]＆＃39;来替换c.toBlob（）之前的所有内容。）。您可能不需要创建新图像和新画布，只需将原始画布直接转换为blob即可。如果您的画布上有CORS图像，我不确定它是否会起作用。

无论如何，这个方法应该适用于在IE中下载的任何画布，如果你不使用seadragon，你可以删除我使用的一堆步骤。

从画布下载图像并不适用于IE 11

2 个答案: