1

我在我的网页上使用 Annotorious 时遇到问题。我必须在我的页面上显示 OpenSeaDragon 图片，我做了什么，并且能够注释图像。我使用了这个页面的源代码http://annotorious.github.io/demos/openseadragon-preview.html，但它不起作用，我在我的页面上看到了“添加注释”按钮，但是我不能t 选择要写东西的区域。需要帮助，这是我的源代码：

<!DOCTYPE html>
<html>
  <head>
     <?php include 'includes/navbar.php' ?> 
       <?php include 'includes/connect_bdd.php';?>

    <title>Annotorious - Image Annotation for the Web</title>
    <link type="text/css" rel="stylesheet" media="all" href="annotorious/css/highlight.css" />
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script src="openseadragon.min.js"></script>
    <script type="text/javascript" src="annotorious/annotorious.min.js"></script>
    <style>
      #map-annotate-button {
        position:absolute;
        top:3px;
        right:3px;
        background-color:#000;
        color:#fff;
        padding:3px 8px;
        z-index:10000;
        font-size:11px;
        text-decoration:none;
      }
    </style>
    <script>
      function annotate() {
        var button = document.getElementById('map-annotate-button');
        button.style.color = '#777';

        anno.activateSelector(function() {
          // Reset button style
          button.style.color = '#fff';
        });
      }

      function init() {             
        var viewer = OpenSeadragon({
          id: "openseadragon",
          prefixUrl: "images/",
          showNavigator: false,
          tileSources:"PhotoDzi/TCGA-BH-A1ES-01Z-00-DX1.C54C809F-748F-4BB0-B018-A8A83A4134C0.svs.dzi"
        });
        
        anno.makeAnnotatable(viewer);
      }
    </script>
  </head>

  <body onload="init()";>
            
    <div class="content">
      <div class="content-inner">
        <div style="position:relative; width:640px; height:400px; margin-bottom:20px;">
          <div id="openseadragon" style="width:640px; height:400px; background-color:#fff;"></div>
          <a id="map-annotate-button" onclick="annotate(); return false;" href="#">ADD ANNOTATION</a>
        </div>

         <h4>About</h4>
            <?php
            $req = $bdd->query('SELECT * FROM miniatures WHERE titre=\'' . $_GET['titre'] . '\'');
            $image = $req->fetch();
            ?> 

            <?php
            $req->closeCursor();
            ?>
          </div>
        </div><!--/.sidebar-offcanvas-->
            
    <script type="text/javascript">
      jQuery(document).ready(function(){
        jQuery('pre.code').highlight({source:0, zebra:1, indent:'space', list:'ol'});
      });
    </script>
  </body>
</html>

4

1 回答 1

0

我用最新的 Openseadragon 和我自己的 dzi 尝试了你的代码，取出 php 并插入了一些文本，然后将 hightlight.css 替换为

“/theme-dark/annotorious-dark.css”

它似乎工作..

于 2015-12-08T23:52:20.800 回答