1

Amazon s3 バケットに多数のディープ ズーム画像が保存されており、それらを Open Seadragon dzi ビューアで表示する Web ページがあります。画像を表示できますが、ダウンロードできません。汚染されたキャンバスがあるというセキュリティ エラーが表示されます。

バケットに 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>

これにより、画像を表示できました (以前は、access-control-allow-origin ヘッダーがなかったため、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';
    });
});
4

1 に答える 1

0

API ドキュメントによると、ポリシー オプションの名前を に変更する必要がありますcrossOriginPolicy。

于 2014-12-01T08:06:17.243 に答える