我在网页上使用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/