Получить часть изображения, где пользователь щелкнул

Question

Можно ли найти, где пользователь нажал на изображение?

У меня есть изображение - и на изображение, которое пользователь может щелкнуть.И я пытаюсь найти способ, как получить место, когда пользователь нажал.

Answer 1

При нажатии на изображение вы можете найти координаты, где пользователь щелкнул, используя объект события.

$("imageSelector").click(function(e){
  var pos = $(this).position();
  //The following are the x/y coordinates of the mouse click relative to image.
  var x = e.pageX - pos.left;
  var y = e.pageY - pos.top;
});

Answer 2

Не дайте себя одурачить методами, которые не учитывают поля, отступы и границы!

Это код, который вам нужен. :

$("#myImage").click ( function (evt) {

    var jThis               = $(this);
    var offsetFromParent    = jThis.position ();
    var topThickness        = (jThis.outerHeight(true) - jThis.height() ) / 2;
    var leftThickness       = (jThis.outerWidth (true) - jThis.width () ) / 2;

    //--- (x,y) coordinates of the mouse click relative to the image.
    var x                   = evt.pageX - offsetFromParent.left - leftThickness;
    var y                   = evt.pageY - offsetFromParent.top  - topThickness;
} );

См. Это в действии на jsFiddle.

Answer 3

Вы можете легко определить положение мыши, а затем добавить что-нибудь к этой точке относительно изображения.

Вот пример положения мыши: jquery.com