Scaling a dynamically added svg is not aligned with the background!

Hello, Currently, I am working on an application that draws freehand overlay, saves the overlay to a file. Then, reload the saved overlay from the file to the webpage. I managed to draw the first overlay and save the ‘svg’ element to my machine as a text file. However, when reopening the saved overlay again after clearOverlays() the saved overlay does not align with the background image unless the image is in the original zooming size. The problem I am facing is that when zooming in/out the image, the overlay keeps its original size while the image behind is resizing correctly. Bellow is code segments of the process, any help or suggestion is appreciated. Two screenshots of the process are attached, the 1st is after drawing the overlay, while the 2nd is after saving and reloading the overlay.

show the image and start drawing the overlay

this.viewer = OpenSeadragon({
            id: "seadragon-viewer",
            prefixUrl: "//openseadragon.github.io/openseadragon/images/",
            tileSources: [{
                type : 'image',
                url: 'back_image.jpg'
                 }]
            });
            viewer.initializeAnnotations();

Saving the drown overlay:

<button type="button" onclick="save_mask()">Save mask</button>
            <script>
                function save_mask() {
                    var svgElement = document.getElementsByTagName('svg');
                    // let height =  svgElement[0].style.height;
                    // let width =  svgElement[0].style.width;
                    let clonedSvgElement = svgElement[0].cloneNode(true);

                    function download(filename, text) {
                        var element = document.createElement('a');
                        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
                        element.setAttribute('download', filename);
                        element.style.display = 'none';
                        document.body.appendChild(element);
                        element.click();
                        document.body.removeChild(element);
                        }
                        download('mask.svg', clonedSvgElement.outerHTML);
                }
            </script>

Here, when I get the fixed size of the loaded overlay:

<script type="text/javascript">
                function readSingleFile(e) {
                var file = e.target.files[0];
                if (!file) {
                    return;
                }
                var reader = new FileReader();
                        reader.onload = function(e) {
                            var contents = e.target.result;
                            displayContents(contents);
                        };
                    reader.readAsText(file);
                }
                function castString2HTML(str) {
                    let temp = document.createElement('div');
                    temp.innerHTML = str;
                    let htmlObject = temp.firstChild;
                    return htmlObject;
                }
                function displayContents(contents) {
                    var element = document.getElementById('file-content');
                    new_svg = castString2HTML(contents);
                    viewer.clearOverlays();
                    viewer.addOverlay(new_svg);
                }
                document.getElementById('file-input')
                .addEventListener('change', readSingleFile, false);
            </script>

[shyamkumaryadav]

So, You only need the SVG path so next time you load the image, want to load the SVG path too?

You are using addOverlay & clearOverlays which is not related to openseadragon-annotations.

const annotations = new OpenSeadragon.Annotations({ viewer });

using annotations you can use getAnnotations() to get path data and setAnnotations(data) to set annotation data on image load

[iangilman]

@magednasan Excellent! You might consider making a pull request with the changes to that project… Even if the owner isn’t maintaining it, other people might value the code.