无法从受污染的画布下载图像；如何下载托管在亚马逊s3存储桶中的Seadragon图像？

Question

我有一堆深度缩放图像存储在亚马逊s3桶中，我有一个网页，用Open Seadragon dzi查看器显示它们。我可以显示图像，但无法下载它们；我收到安全错误，即我的画布已被污染。

我在存储桶中设置了CORS配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

这允许我显示图像(之前我的OpenSeadragon调用失败，因为没有访问控制允许原始头)，但我的画布仍然受到污染。

我尝试在seadragon查看器中设置crossOrigin策略：

var viewer = OpenSeadragon({
        crossOrigin: "Anonymous",
        id: "databaseviewer",
        prefixUrl: "../../Scripts/openseadragon/images/",
        tileSources: url,
        maxZoomLevel: 20
    });

但这并没有改变任何事情。这是我的完整脚本：

var url = '@Model.ImageUrl';

var viewer = OpenSeadragon({
    crossOrigin: "Anonymous",
    id: "databaseviewer",
    prefixUrl: "../../Scripts/openseadragon/images/",
    tileSources: url,
    maxZoomLevel: 20
});

viewer.addHandler('open', function() {                  
    var downloadlink = document.getElementById("download");
    $(downloadlink).on("click", function() {
        var img = viewer.drawer.canvas.toDataURL("image/png");
        downloadlink.href = img;
        downloadlink.download = '@Model.DatabaseName';
    });
});

Answer 1

根据API documentation，您应该将策略选项重命名为crossOriginPolicy。