Как определить координаты клика на оригинале изображения в img с object-fit: contain?

Question

[zax2002]

На странице есть картинка с неопределённым реальным размером (1280х800 например). Мне нужно получить координаты клика на оригинале. Вроде всё просто: this.naturalWidth / this.offsetWidth * event.offsetX.
Но это работает только, если размер элемента img равен размеру картинки после масштабирования. Но в таком случае не работает object-fit. Чтобы он работал надо растянуть img на 100%, но тогда уже offsetWidth, offsetHeight не даю нужного эффекта. Как мне решить эту проблему?

Comments

[Kovalsky]

А задача какая?

[zax2002]

Никита Полевой, При клике на скрин, на комп отправлялись координаты и там происходила эмуляция клика мышью

[Kovalsky]

zax 2002, мне кажется вам проще будет отказаться от object-fit: contain и считать масштабы & положение вручную, за эти нехитрые махинации вы будете вознаграждены возможностью считать координаты клика относительно целевой ноды прямо из объекта события клика.

Answer 1

[Ridz]

вариант ...

$(function() {
    $("img").click(function(event) {
        var nh = this.naturalHeight,
            nw = this.naturalWidth,
            p = nw / nh,
            h = Math.min(this.scrollHeight, this.scrollWidth / p),
            w = h * p,
            t = (this.scrollHeight - h) / 2,
            d = (this.scrollWidth - w) / 2,
            x = event.offsetX,
            y = event.offsetY;
        if (x >= d && x <= d + w && y >= t && y <= t + h) {
            x -= d;
            x *= nw / w;
            x = Math.round(x);
            y -= t;
            y *= nh / h;
            y = Math.round(y);
            alert([x, y])
        }
    })
});