After installing annotorious from the GitHub repository and following the code provided in the official documentation, I encountered an issue where the annotations were not displaying on the image as expected. Below is the HTML code that I used:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="annotorious.min.css">
</head>
<body>
<div id="content">
<img id="hallstatt" src="640px-Hallstatt.jpg">
</div>
<script>
(function() {
var anno = Annotorious.init({
image: 'hallstatt' // image element or ID
});
anno.loadAnnotations('annotations.w3c.json');
// Add event handlers using .on
anno.on('createAnnotation', function(annotation) {
// Do something
});
})()
</script>
<script type="text/javascript" src="annotorious.min.js"></script>
<script type="text/javascript" src="annotorious.umd.js.map"></script>
<script type="text/javascript" src="recogito-polyfills.js"></script>
</body>
</html>
I have verified that all necessary files are located in the same directory, as shown below:
Directory of C:\Users\YCH\Desktop\test_annotation
03/11/2023 12:42 <DIR> .
03/11/2023 12:42 <DIR> ..
03/11/2023 12:41 7 368 640px-Hallstatt.jpg
03/11/2023 14:18 10 311 annotorious.min.css
03/11/2023 12:52 286 326 annotorious.min.js
03/11/2023 12:36 1 055 483 annotorious.umd.js.map
03/11/2023 14:16 937 index.html
03/11/2023 12:36 161 729 recogito-polyfills.js
To troubleshoot, I tested the CSS by changing the body color and the JavaScript by using console.log, but even after configuring both with the HTML file, the annotations still did not appear on the image.