ERROR Error: Error: Annotorious does not support this media type in the current version or build configuration.

[rvuyyuru1]

please help me out
i am using jpg image serving from firebase

and i am using latest version of annotorious plugin

the error is caused due to this this.anno.makeAnnotatable(this.myAnnotation);

[jimdeng92]

Well, I've had the same problem with openseadragon.
When I need to use anno. makeAnnotatable () in mounted vue, anno me this error.
I want to know if your situation is as up-to-date as mine.
Thank you.

export default {

  mounted () {
    anno.Annotatable(this.viewer)
  }
}

[wuliupo]

hi @rajashekarreddy2222 @aaaxiu

maybe you should call the makeAnnotatable after the image loaded.

<img src="THE_IMAGE_URL" onload="init(this)">

function init(image) {
   anno.makeAnnotatable(image);   // if it is vue.js, you can use $refs
}

[ursuresh]

how about dynamic images will it work for that ?.

in my case also same issue i am getting Error: Annotorious does not support this media type in the current version or build configuration.

var viewer = OpenSeadragon({
id: "openSeaDemo",
prefixUrl: "https://neswork.com/javascript/openseadragon-bin-2.1.0/images/",
//tileSources: "https://openseadragon.github.io/example-images/highsmith/highsmith.dzi",
tileSources: { type: 'legacy-image-pyramid', levels: [{ url: 'https://annotorious.github.io/demos/2003rosen1799/0001q.jpg', height: 889, width: 600 }, { url: 'https://annotorious.github.io/demos/2003rosen1799/0001r.jpg', height: 2201, width: 1485 }, { url: 'https://annotorious.github.io/demos/2003rosen1799/0001v.jpg', height: 4402, width: 2970 }] },
showNavigator: true
});
//anno.makeAnnotatable(document.getElementById('myImage1'));
//anno.makeAnnotatable(document.getElementById('myImage2'));
annotoriousService.makeAnnotatable(viewer);
annotoriousService.activateSelector();

      annotoriousService.addHandler('onAnnotationCreated', function (annotation) {
        console.log("onAnnotationCreated", JSON.stringify(annotation));
      });

[TipsyDr]

动态图像如何工作呢？

在我的情况下，我也遇到同样的问题错误：Annotorious在当前版本或内部版本配置中不支持此媒体类型。

VAR =观察者OpenSeadragon（{
ID： “openSeaDemo”，
prefixUrl： “ https://neswork.com/javascript/openseadragon-bin-2.1.0/images/ ”，
// tileSources：“ HTTPS：//openseadragon.github。 io / example-images / highsmith / highsmith.dzi “，
tileSources：{类型：“ legacy-image-pyramid”，级别：[{url：'https://annotorious.github.io/demos/2003rosen1799/0001q.jpg '，高度：889，宽度：600}，{网址：'https：//annotorious.github.io/demos/2003rosen1799/0001r.jpg'，高度：2201，宽度：1485}，{网址：'https：/ /annotorious.github.io/demos/2003rosen1799/0001v.jpg'，高度：4402，宽度：2970}]}，
showNavigator：true
}）；
//anno.makeAnnotatable(document.getElementById('myImage1'））;
//anno.makeAnnotatable(document.getElementById('myImage2'））;
annotoriousService.makeAnnotatable（viewer）;
annotoriousService.activateSelector（）;

      annotoriousService.addHandler('onAnnotationCreated', function (annotation) {
        console.log("onAnnotationCreated", JSON.stringify(annotation));
      });

Hello, have you solved your problem

[TipsyDr]

动态图像如何工作呢？

在我的情况下，我也遇到同样的问题错误：Annotorious在当前版本或内部版本配置中不支持此媒体类型。

VAR =观察者OpenSeadragon（{
ID： “openSeaDemo”，
prefixUrl： “ https://neswork.com/javascript/openseadragon-bin-2.1.0/images/ ”，
// tileSources：“ HTTPS：//openseadragon.github。 io / example-images / highsmith / highsmith.dzi “，
tileSources：{类型：“ legacy-image-pyramid”，级别：[{url：'https://annotorious.github.io/demos/2003rosen1799/0001q.jpg '，高度：889，宽度：600}，{网址：'https：//annotorious.github.io/demos/2003rosen1799/0001r.jpg'，高度：2201，宽度：1485}，{网址：'https：/ /annotorious.github.io/demos/2003rosen1799/0001v.jpg'，高度：4402，宽度：2970}]}，
showNavigator：true
}）；
//anno.makeAnnotatable(document.getElementById('myImage1'））;
//anno.makeAnnotatable(document.getElementById('myImage2'））;
annotoriousService.makeAnnotatable（viewer）;
annotoriousService.activateSelector（）;

      annotoriousService.addHandler('onAnnotationCreated', function (annotation) {
        console.log("onAnnotationCreated", JSON.stringify(annotation));
      });

Hello, have you solved your problem

[TipsyDr]

嗨@ rajashekarreddy2222 @aaaxiu

也许您应该在图像加载后调用makeAnnotatable。

< img  src = “ THE_IMAGE_URL ”  onload = “ init（this）” >

功能 的init（图像）{
    阿鲁。makeAnnotatable（图片）;   //如果是vue.js，则可以使用$ refs 
}

Hello, have you solved your problem