У меня есть HTMLImageElement (он же тег img) со свойством object-fit, установленным на cover. object-position позволяет механизму макета выполнять обрезку изображения при изменении соотношения сторон контейнера. Я хотел бы позволить пользователю щелкнуть пиксель на изображении и рассчитать соответствующее свойство object-position так, чтобы последующее кадрирование велось хорошо.
В качестве иллюстрации в приведенном ниже примере пользователь нажимает на левый глаз лица человека на картинке. Оказывается, это соответствует x = 41% и y = 40% относительно изображения.
<img style="width:80vw;height:10vh;object-fit:cover;object-position: 41% 40%;" src="https://i.picsum.photos/id/1027/2848/4272.jpg">
<img style="width:1vw;height:80vh;object-fit:cover;object-position: 41% 40%;" src="https://i.picsum.photos/id/1027/2848/4272.jpg">
https://codepen.io/MountainJack/pen/QWbaddV
Задача заключается в обработчик событий в javascript для преобразования позиции щелчка мыши в относительное свойство object-position. Кажется нетривиальным перепроектировать относительную позицию изображения из абсолютной позиции щелчка мыши, поскольку изображение может отображаться обрезанным во время щелчка мыши.
Есть идеи?