Annotation Move

[MichealJWEllis]

I'm currently having issues with the use of your component. Each time I load my file then annotate it the annotations will move on the image. Can you please tell me what I'm doing wrong here?

Code:

[ailon]

First of all, you shouldn't do this:

markerArea.styles.addRule({
  selector: "img,img+div>svg",
  style: "object-fit: contain"
});

Messing with internal styles is a recipe for disaster.

If you could explain why this was needed in your scenario, we could try to figure out how to mitigate the problem in some other non-destructive way.

[MichealJWEllis]

This was done to mitigate the distortion of the image. Some images I would upload would change their ratio when I viewed them in the component. I've done some testing, and it seems like the annotations will not move on .jpeg files, but all others i.e. png, jpg will move the annotations from where they are placed.

[ailon]

This was done to mitigate the distortion of the image. Some images I would upload would change their ratio when I viewed them in the component.

I think this is what we need to figure out - this shouldn't happen. I don't think I can help with mitigation of side-effects from a "hacky" internal styles mod.

[MichealJWEllis]

That's okay if you can't help with the "hacky" portion as I've removed that portion of the code. Your correct it is affecting the display of the image too much to justify keeping that portion of code. When that code is removed my annotations will remain in the position that I've placed them. The images will squeeze to fit the component though! Can you help with this?

Image normally:

Image in markerjs2:

[ailon]

How is your source image placed on the page? Does it have width/height set? If not, have you tried setting width/height on it?

[MichealJWEllis]

@ailon Thank you very much for all your help and I apologize for the late response. The issue was that the CSS that was placed on my image in the code was being used by the component. This was causing warping and distortion. Instead of trying to override or change the CSS for the component I just styled the parent. The enabled me to achieve my desired results and not have to fiddle with your tool. Once again thank you and I will consider this closed.