OpenSeadragon Annotorious答案

【问题标题】：OpenSeadragon AnnotoriousOpenSeadragon Annotorious
【发布时间】：2020-10-19 15:31:14
【问题描述】：

所以我一直在尝试在我的网站上使用 OpenSeadragon 的 annotorius 插件，但由于某种原因，该插件甚至没有加载。我认为目录部分的东西没有问题。

这是我的代码：


</head>
<body>

<div id="openseadragon1" style="width: 1000px; height: 600px;"></div>
<div id="example-overlay" style = "width: 1000px; height: 600px" ></div>
<script src="openseadragon-bin-2.4.2/openseadragon-bin-2.4.2/openseadragon.min.js"></script>
<script src="openseadragon-annotorious.min.js"></script>
<script type="text/javascript">
    console.log(5+6);
   window.onload = function(){
        var viewer = OpenSeadragon({
        id: "openseadragon1",
        prefixUrl:     "openseadragon-bin-2.4.2/openseadragon-bin-2.4.2/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";
        }
}
});
   
  // Initialize the Annotorious plugin
    var anno = OpenSeadragon.Annotorious(viewer);
    // Load annotations in W3C WebAnnotation format
    anno.loadAnnotations('annotations.w3c.json');

    // Attach handlers to listen to events
    anno.on('createAnnotation', function(a) {
      // Do something
      console.log('Created!');
    });
}

</script>
</body>

【问题讨论】：

标签： javascript html openseadragon

【解决方案1】：

很抱歉将此作为“答案”发布，但我没有声誉点可发表评论。

您的代码看起来完全正常。 OpenSeadragon 图像是否正确加载？如果是这样，您应该能够通过按住 SHIFT 按钮 + 单击并用鼠标拖动来开始注释。

JS 控制台会说什么吗？您能否确认 Annotorious 插件脚本已正确加载？（例如，通过将 console.log(anno) 放在 init 行之后？）

【讨论】：