Annotorious JavaScript标注库无法正常工作的技术求助

问题根源 #

你的代码存在三个关键问题导致Annotorious功能失效：

• 初始化代码在Annotorious核心脚本之前执行，此时Annotorious全局对象尚未定义
• 错误引入了不需要单独加载的源码映射文件（.map）
• Polyfills脚本加载顺序不合理

修正后的完整代码 #

<!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 type="text/javascript" src="recogito-polyfills.js"></script>
        <script type="text/javascript" src="annotorious.min.js"></script>

        <!-- 再执行初始化代码 -->
        <script>
          (function() {
            var anno = Annotorious.init({
              image: 'hallstatt' // image element or ID
            });

            // 若annotations.w3c.json文件不存在，可先注释此行验证基础功能
            // anno.loadAnnotations('annotations.w3c.json');

            // Add event handlers using .on  
            anno.on('createAnnotation', function(annotation) {
              // Do something
            });
          })()
        </script>
      </body>
</html>

关键修改说明 #

1. 调整脚本顺序：将recogito-polyfills.js和annotorious.min.js移到初始化代码之前，确保全局Annotorious对象已被正确加载。
2. 移除无用文件引入：删除annotorious.umd.js.map的<script>标签，该文件是调试用的源码映射文件，浏览器会自动关联，无需手动引入。
3. 验证注释文件：如果annotations.w3c.json文件不存在，建议先注释anno.loadAnnotations这一行，先确认Annotorious的基础标注功能是否正常，再逐步添加注释加载逻辑。

内容的提问来源于stack exchange，提问作者user