时间戳

首页 > 解决方案 > Openseadragon 简单图像

javascript - Openseadragon 简单图像

问题描述

我正在尝试使用exist-db和openseadragon构建一些东西：

我的文件结构可以在链接中找到。 点击这里 里面，我有相应的文件。现在，我想在 show.html 中使用带有 openseadragon 的简单图像（位于页面中。因为我所有的 html 文件都存储在该文件夹中。）

我的 show.html 看起来像这样：

<div class="content-container">
<div class="column">blablabla</div>
<div class="column" id="dragon-container">
<div id="seadragon-viewer" style="height:600px; width:100%; position:right;"/>
</div>

var viewer = OpenSeadragon({ id: "seadragon-viewer", tpye: "image", url: "/data/images/Page0001.JPG" }); 
    </div>

这就是我得到的。带有导航切换的空 openseadragon-div。

我首先以为我弄乱了 URL，并在其中添加了“../”（或任何其他位置），但无济于事。谁能指出我正确的方向？

在我显示 Page0001.JPG 之后，我将从我拥有的 18 张图片中制作一个序列（并将 openseadragon-viewer 同步到包含随附文本的 div）

这只是第一步，我想我以后会去买天珠。但是，我现在只有蹩脚的照片，我必须拍更好的照片，所以为什么不在我添加最终照片之前先做一个“概念”（+我想学习一些东西！）

提前致谢！

标签： javascripthtmlopenseadragon

解决方案

您需要将图像规范放入您的tileSources属性中，如下所示：

var viewer = OpenSeadragon({ 
  id: "seadragon-viewer", 
  tileSources: {
    type: "image", 
    url: "/data/images/Page0001.JPG" 
  }
});

推荐阅读