Hello,
I’m struggling to code a LiveView that will return the exact position user clicks into an img HTML element.
My issue is about getting the element DOM naturalwidth and naturalheight.
Even though I set the img width to say 600px, for some reasons I don’t know, in some pages the image is actually displayed as 681px width.
So, when I retrieve the user click offsetX position (from the on-click event), it varies from 0 to 681 range and not from 0 to 600 range as expected.
That throws my computation off since I base it on 600, not 681 !
I think I could solve the issue by querying the clicked element about its naturalwidth, but I don’t know how to do that. I bet Javascript hook is the right path, but can’t work my head around it.
Any tips are welcome.

My current app.js liveSocket code is

let liveSocket = new LiveSocket("/live", Socket, {
    hooks: Hooks, params: { _csrf_token: csrfToken }, metadata: {
        click: (e, _el) => {
            return {
                offsetX: e.offsetX, offsetY: e.offsetY, clientX: e.clientX,
                clientY: e.clientY, pageX: e.pageX, pageY: e.pageY
            }
        }
    }
})

Thank you
Jean-yves