问题描述
我正在尝试让 openseadragon js 处理存储在我的 AWS S3 存储桶中的图像。这些文件是私有的，我不确定如何引用包含我所有金字塔图像的文件夹。在 tilesource-custom documentation 中，他们使用了：
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 中的函数(level,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,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。我创建了一个函数，它将存储桶键作为参数，然后将这个名为 s3_bucket_url_js 的函数放在 getTileUrl 函数（级别，x，y）中。因为我不知道 function(level,y) 是如何工作的，所以我假设它迭代到最小级别，所以我让它创建了我的 jpg 文件名，它遵循三位数的命名约定：0-0-0。 jpg、1-0-0.jpg、1-1-0.jpg 等。我认为将整个键值放入我的 s3_bucket_url 函数中以创建我返回的预签名 url，希望它能够成功呈现。当然没有。
我在s3bucket中的文件夹结构如下：
当我将文件存储在我的 ec2 上时，我只是引用了tilesUrl: 'gtss/pyr/103/01_VISUAL/ 而不是 getTileUrl，它在编译所有图像时运行良好。但我无法引用 s3 存储桶上的文件夹，因为它是私有的。
最后，我在 html 中添加了 div 标签以显示 openseadragon 地图。
<div id="openseadragon1" style="width: 800px; height: 600px;"></div>
快速更新：我查看了我正在使用的 openseadragon.min.js 文件，相信我找到了 getTileUrl 函数，该函数返回每个金字塔图像的路径。如下：
_calculateAbsoluteTileNumber: function(e,t,i) {
var n = 0;
var o = {};
for (var r = 0; r < e; r++) n += (o = this.gridSize[r]).x * o.y;
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,i) {
var n;
var o = this._calculateAbsoluteTileNumber(e,i);
n = Math.floor(o / 256);
return this.tilesUrl + "TileGroup" + n + "/" + e + "-" + t + "-" + i + ".jpg"
}现在我正在考虑尝试在 getTileUrl 方法中使用我的 s3_bucket_url_js 函数并返回 s3_bucket_url_js(this.tilesUrl + "TileGroup" + n+ "/" + e + "-" + t + "-" + i + ".jpg"
之前有一条评论是关于从后端调用预先签名的 url 并将其传递给前端。我该怎么做才能使用 openseadragon.min.js 文件中的 s3_bucket_url_js() ？
这是代码片段的未缩小版本：
//private
_calculateAbsoluteTileNumber: function(level,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,y) {
//console.log(level);
var result = 0;
var num = this._calculateAbsoluteTileNumber(level,y);
result = Math.floor(num / 256);
return this.tilesUrl + 'TileGroup' + result + '/' + level + '-' + x + '-' + y + '.jpg';
}解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）