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



<!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>

最佳答案

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

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

而且似乎可行。

关于javascript - 在网页上使用Annotorious的问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30613537/

10-10 22:12