如何使 seadragon js 與 AWS S3 預簽名 URL 一起使用

Question

我正在嘗試讓 openseadragon js 處理存儲在我的 AWS S3 存儲桶中的圖像。 這些文件是私有的，我不確定如何引用包含我所有金字塔圖像的文件夾。 在 tilesource-custom文檔中，他們使用了：

 OpenSeadragon({ id: "example-custom-tilesource", prefixUrl: "/openseadragon/images/", navigatorSizeRatio: 0.25, wrapHorizontal: true, tileSources: { height: 512*256, width: 512*256, tileSize: 256, minLevel: 8, getTileUrl: function( level, x, y ){ return "http://s3.amazonaws.com/com.modestmaps.bluemarble/" + (level-8) + "-r" + y + "-c" + x + ".jpg"; } } });

我不確定 getTileUrl 中的 function(level, x, y) 是如何工作的。 我假設它迭代到某個點。 任何關於它如何工作的解釋都會有幫助。 因此，基於此示例，我嘗試了以下操作：

 const s3 = new AWS.S3(); const s3_bucket_url_js = function($key) { s3.getSignedUrl('getObject', { Bucket: "g-deliverables", Expires: 60*30, Key: $key, }, function (err, url) { if (err) { console.log(err); } else { console.log(typeof url); return url; } }); } OpenSeadragon({ id: "openseadragon1", prefixUrl: "/GTSS/assets/buttons", showNavigator: false, tileSources: { type: 'zoomifytileservice', height: 3600, width: 2700, tileSize: 256, getTileUrl: function( level, x, y ){ var url_s = "whatever/pyr/some#/01_VISUAL/TileGroup0/" +level + "-" + x + "-" + y + ".jpg"; return s3_bucket_url_js(url_s); } } });

我為 JS 使用了 AWS sdk 第 2 版。 我創建了一個 function ，它以存儲桶鍵作為參數，然后將這個名為 s3_bucket_url_js 的 function 放在 getTileUrl ZC1C425268E687yA94.41 (x4.4C) 中，稱為 s3_bucket_url_js 因為我不知道 function(level, x, y) 是如何工作的，所以我假設它迭代到了 min-level，所以我讓它創建了我的 jpg 文件名，它遵循三位數的命名約定：0-0-0。 jpg、1-0-0.jpg、1-1-0.jpg 等。我認為將整個鍵值放入我的 s3_bucket_url function 以創建一個預簽名的 url，我希望它能夠成功渲染。 當然它沒有。

我在 s3 存儲桶中的文件夾結構如下：

文件夾結構 s3 bucket

當我將文件存儲在我的 ec2 上時，我只是引用了 tilesUrl: 'gtss/pyr/103/01_VISUAL/ 而不是 getTileUrl，它在編譯所有圖像時工作得很好。 但我無法引用 s3 存儲桶上的文件夾，因為它是私有的。

最后在 html 中，我添加了用於顯示 openseadragon map 的 div 標簽。

<div id="openseadragon1" style="width: 800px; height: 600px;"></div>

快速更新：我查看了我正在使用的 openseadragon.min.js 文件，並相信我找到了 function getTileUrl，它返回了我的每個金字塔圖像的路徑。 如下：

 _calculateAbsoluteTileNumber: function(e, t, i) { var n = 0; var o = {}; for (var r = 0; r < e; r++) n += (o = this.gridSize[r]).x * oy; return n += (o = this.gridSize[e]).x * i + t }, supports: function(e, t) { return e.type && "zoomifytileservice" == e.type }, configure: function(e, t) { return e }, getTileUrl: function(e, t, i) { var n; var o = this._calculateAbsoluteTileNumber(e, t, i); n = Math.floor(o / 256); return this.tilesUrl + "TileGroup" + n + "/" + e + "-" + t + "-" + i + ".jpg" }

現在我正在考慮嘗試在 getTileUrl 方法中使用我的 s3_bucket_url_js function 並返回 s3_bucket_url_js(this.tilesUrl + "TileGroup" + n+ "/" + e + "-" + t + "-" + i + "。 jpg"

之前有評論說從后端調用預簽名的 url 並將其傳遞給前端。 我將如何 go 關於這個，所以我可以使用 openseadragon.min.js 文件中的 s3_bucket_url_js() ？

這是代碼片段的未縮小版本：

 //private _calculateAbsoluteTileNumber: function(level, x, y) { var num = 0; var size = {}; //Sum up all tiles below the level we want the number of tiles for (var z = 0; z < level; z++) { size = this.gridSize[z]; num += size.x * size.y; } //Add the tiles of the level size = this.gridSize[level]; num += size.x * y + x; return num; }, /** * Determine if the data and/or url imply the image service is supported by * this tile source. * @function * @param {Object|Array} data * @param {String} optional - url */ supports: function(data, url) { return (data.type && "zoomifytileservice" == data.type); }, /** * * @function * @param {Object} data - the raw configuration * @param {String} url - the url the data was retrieved from if any. * @return {Object} options - A dictionary of keyword arguments sufficient * to configure this tile sources constructor. */ configure: function(data, url) { return data; }, /** * @function * @param {Number} level * @param {Number} x * @param {Number} y */ getTileUrl: function(level, x, y) { //console.log(level); var result = 0; var num = this._calculateAbsoluteTileNumber(level, x, y); result = Math.floor(num / 256); return this.tilesUrl + 'TileGroup' + result + '/' + level + '-' + x + '-' + y + '.jpg'; }

Answer 1

到目前為止，我們已經弄清楚如何通過js瀏覽器將output s3 presigned url 放入。 我們使用 aws cognito 身份池 ID 代替 aws 秘密訪問密鑰，以允許我們在瀏覽器中使用 aws sdk js。 通過修改我們使用的 openseadragon.min.js 文件，我們能夠為圖片放置預簽名的 url。 在第 5370 行附近，有一個 getTileUrl function 編譯縮放金字塔的文件夾路徑：

  getTileUrl: function(e, t, i) {
        var n;
        var o = this._calculateAbsoluteTileNumber(e, t, i);
        n = Math.floor(o / 256);
        var url = this.tilesUrl + "TileGroup" + n + "/" + e + "-" + t + "-" + i + ".jpg";
        return s3_bucket_url_js(url);


    }

在最后一條語句中，我們使用 function （位於我們放置 map div 的同一文件中）返回一個返回值，它返回一個可以編譯的預簽名 url。 如果您注意到 var url = this.titleUrl 等。 this.tilesUrl 位於 OpenSeadragon() object 中：

var viewer = OpenSeadragon({
                  id:            "openseadragon1",
                  prefixUrl:     "assets/buttons/",
                  showNavigator: false,
tileSources:   {
          type: 'zoomifytileservice',
          height: 3600,
          width:  3600,
          tileSize: 256,
          tilesUrl: 'whatever/pyr/our path up to TileGroup#/'});

            

這是我們使用的 s3 function（另請注意，我們使用 aws sdk 版本 2 用於瀏覽器）。 至少對我們來說，異步調用 s3.getSignedUrl() 是行不通的，所以我們不得不使用如下所示的同步方式：

   AWS.config.region = 'us-east-1';
   AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'your own identity pool' });
   const s3 = new AWS.S3();
   function s3_bucket_url_js(key) {
       var params = {Bucket: 'bucket name', Key: key, Expires:1000};
       var s3_presigned = s3.getSignedUrl('getObject', params);
       return s3_presigned;
       }

另請注意，身份池適用於未經身份驗證的用戶。 我們向附加到身份池的角色添加了 s3 只讀訪問 IAM 策略。 在我們對公眾關閉的 s3 存儲桶中，我們添加了 CORS 策略：

[
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "GET"
    ],
    "AllowedOrigins": [
        "your site"
    ],
    "ExposeHeaders": [
        "Content-Type",
        "X-Amz-Date",
        "Authorization",
        "X-Api-Key",
        "X-Amz-Security-Token"
    ]
}

]

現在，我們在編譯時遇到了一些問題。 使用我們的密鑰，OpenSeaDragon 成功編譯了所有圖像，但使用身份池 ID，金字塔的前 2 個級別沒有編譯並返回https://s3.amazonaws.com/的非預簽名 url發送 CORB 錯誤（可能是因為 url 不是圖像）。 我相信這與瀏覽器為身份池 ID 發送的請求有關，但我們仍在試圖弄清楚如何解決它。