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

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

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

    <template>
        <div class="flex-grow">
            <img ref="tag_img" width="100%" :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

解决方法

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

您 function testfunc(age){ return new Promise ((resolve,reject) =>{ let result = []; const sql = 'SELECT * FROM [datingschema].[user] where age = @age' const request = new Request(sql,function(err){ if (err){ console.log("beforeerr"); console.log(err) //ingen err - så det godt nok! console.log("aftererr"); reject(err); } }) request.addParameter('age',TYPES.Int,age) // This is executed multiple times,once for each row request.on('row',(columns) => { let row = [] // Accumulate the columns to a row columns.forEach(column =>{ row.push(column.value) }) // Don't resolve here. Instead append to result.. // resolve(result) result.push(row) }); // This is executed once,when the query has completed request.on('done',() => { // .. and resolve here resolve(result) }) connection.execSql(request) }) } 使用的是 OpenSeadragon 版本。但是您初始化的方式是您用于 Annotorious 标准版本的方式。

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

import

,

Rainer 的回答让我找到了一个工作版本。可以在 annotorious 的挂载函数中初始化。

    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


         }
}