如何在 vue.js 模板中使用 annotorious

Posted 2023-02-22

【中文标题】如何在 vue.js 模板中使用 annotorious

【英文标题】：How to use annotorious in vue.js template

【发布时间】：2021-07-19 15:11:23

【问题描述】：

我想在 vue.js (vue 3) 模板中使用 annotorious（带有 openseadragon 插件）。 我已经用 npm 安装了 annotorious。 这是我到目前为止所得到的：

    <template>
        <div class="flex-grow">
            <img ref="tag_img"  :id="img_id" src='../../assets/images/apple.png'>
        </div>
    </template>
    
    <script>
    import * as Annotorious from '@recogito/annotorious-openseadragon'
    import '@recogito/annotorious-openseadragon/dist/annotorious.min.css'
    
    export default 
      props: 
        img_id: String
      ,
      mounted: function () 
        var anno = Annotorious(
          image: this.$refs.tag_img
        , )
        anno.setDrawingTool('polygon')
      
    
    </script>

我在浏览器中收到以下错误：

    [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'style' of undefined"

found in

---> <AnnotoriousImage> at src/components/interaction/AnnotoriousImage.vue
       <Tagging> at src/components/pages/Tagging.vue
         <App> at src/App.vue
           <Root>
warn @ vue.esm.js?efeb:628
logError @ vue.esm.js?efeb:1893
...
vue.esm.js?efeb:1897 TypeError: Cannot read property 'style' of undefined

【参考方案1】：

我相信您正在混淆 Annotorious 的标准版本（用于图像）和 OpenSeadragon 插件（用于高分辨率图像，显示在 OpenSeadragon 查看器中）。

你importing 是OpenSeadragon 版本。但是您初始化的方式是您将用于 Annotorious 标准版本的方式。

假设您要注释正常图像：init 是正确的。但是你需要

 import * as Annotorious from '@recogito/annotorious'

【参考方案2】：

Rainer 的回答将我带到了一个工作版本。可以在 annotorious 的 mount 函数中初始化。

    import OpenSeadragon from 'openseadragon'
    import * as Annotorious from '@recogito/annotorious-openseadragon'
    import '@recogito/annotorious-openseadragon/dist/annotorious.min.css'

export default 
      props: 
        img_url: String,
        default: '../../../assets/images/apple.png'
      ,
      mounted: function () 
        const viewer = OpenSeadragon(
          id: 'annotorious_container',
          minZoomImageRatio: 0,
          maxZoomPixelRatio: Infinity,
          tileSources: 
            type: 'image',
            url: require('../../../assets/images/apple.png'),
            ajaxWithCredentials: false,
            fitBounds: true
          
        )
    
        var options = 
          disableEditor: true // the default editor is disabled to implement a custom behaviour
        
        var anno = Annotorious(viewer, options)
        anno.setDrawingTool('polygon')
        
        window.viewer = viewer
        window.anno = anno
      ,
      components: 
        'Icon': Icon,
        'AnnotoriusEditorPopup': AnnotoriusEditorPopup