Updating the image while retaining Annotorious functionality in OpenSeadragon

Question

I am working on a project where you can annotate a zone (using Annotorious). Once you have finished annotating and push the "END TASK" button, it will redirect to the next task within the same project. My problem is that after I load the new image, I am no longer able to annotate. Before, I could switch between zoom and annotate mode.

To reset the image, I use the viewer destroy function from Annotorious 2.7.10, but I am concerned that this might affect the functionality of Annotorious and OpenSeadragon. How can I update the image and still be able to annotate?

OPENSEADRAGON CODE

var viewer = OpenSeadragon({
            id: "documentopdftranscribir",
            prefixUrl: "/static/img/openseadragon/",
            tileSources: {
                type: "image",
                url: url
            },
            showRotationControl: true, 
            showFlipControl: false,
            constrainDuringPan: true,
            showNavigator: false, 
        });

        anno = OpenSeadragon.Annotorious(viewer, {
            locale: 'auto',
            crosshair: false,
            drawOnSingleClick: true,
            allowEmpty: true,
            disableEditor: false, 
        });

and at the end of the code I got this

if(viewer){
  viewer.destroy();
}

Answer 1

Sorry, this might be a late answer... but, yes, it's the right approach. You can destroy the viewer to get rid of the annotation layer.

Keep in mind though that after you change the image in OpenSeadragon, you'll need to instantiate a new annotation layer by creating a new Annotorious instance on the viewer. I.e. you need to run this again:

anno = OpenSeadragon.Annotorious(viewer, {
  locale: 'auto',
  crosshair: false,
  drawOnSingleClick: true,
  allowEmpty: true,
  disableEditor: false, 
});