imageToViewportRectangle not working as expected

I am using OpenSeadragon to view an image and crop regions from it. The cropped regions are stored in a database using their image coordinates (in pixels). I want the cropped images to appear when I reopen the page.

I can add the overlay if I do the following

var overlayElement = document.createElement('div');
overlayElement.id = 'region_box_' + String(region_num);
overlayElement.style.border = "4px solid green";
var rect = new OpenSeadragon.Rect({{region.x}}/viewer.source.width;, {{region.y}}/ viewer.source.height, {{region.width}}/viewer.source.width;, {{region.height}}/viewer.source.height)

viewer.addOverlay(overlayElement, rect);

Is there a better way to do this? I had expected this to work, but it does not transform the coordinates at all so I must be using it incorrectly: rect = viewer.viewport.imageToViewportRectangle({{region.x}}, {{region.y}}, {{region.width}}, {{region.height}})

[shyamkumaryadav]

Happy to know that you resolve the issue!

[gregster7]

Yeah, you’ll definitely want to make sure the image is loaded. Put it inside a viewer.addHandler('open', function() { ... }).

That fixed it - thanks!