イメージ上のマウスクリックを検出してデータベースに格納します。

イメージに対するマウスクリックを検出し、すべてのクリックポイントをデータベースファイルに保存したいと考えています。私はそれを試みましたが、セッション内のすべてのクリックではなく、最後のクリックを取得することしかできません。あなたはすべてのAJAX呼び出し上のすべてのクリックを保存することができます。これによりイメージ上のマウスクリックを検出してデータベースに格納します。

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script> 
     $(document).ready(function() 
     { 
     $('img').click(function(f) 
     { 
      var offset = $(this).offset(); 
      var X = (f.pageX-offset.left); 
      var Y = (f.pageY-offset.top); 
      var X1=[X]; 
      var Y1=[Y]; 
      $('#display').text('X: ' + X1 + ', Y: ' + Y1); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <img style="width:500px;"src="mouseclick.png"/> 
    <div id="display"> 
    </div> 
    </body> 
</html>

出典

2017-02-07 Anvesh

あなたはあなたがあなたのデータベースを更新/挿入する方法私たちを見ることができますか？ – danjbh

問題が発生したデータベースに挿入する方法はわかりません！ – Anvesh

2つの変数xとyを格納するajax呼び出しを行います。 –

：マウスクリックのための私のコードは次のようになります。

$(document).ready(function() { 
 
    $('img').click(function(e) { 
 
    var offset = $(this).offset(); 
 
    var xPoint = e.pageX - offset.left; 
 
    var yPoint = e.pageY - offset.top; 
 
    alert(e.pageX - offset.left); 
 
    alert(e.pageY - offset.top); 
 
    $.ajax({ 
 
     url: "where you want to go example: /Admin/SavePoints", 
 
     type:"POST", 
 
     data:{xAxis:xPoint,yAxis:yPoint }, 
 
     success: function(data){ 
 
     alert("Saved"); 
 
     } 
 
     error: function(){ 
 
     alert("ERROR"); 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

更新フィドル：

$(document).ready(function() { 
 
    var arrayOfXY = new Array(); 
 
    $('img').click(function(e) { 
 
     var offset = $(this).offset(); 
 
     var xPoint = e.pageX - offset.left; 
 
     var yPoint = e.pageY - offset.top; 
 
     arrayOfXY.push({x:xPoint, y:yPoint}); 
 
    }); 
 
    
 
    $(".showCoordinates").on("click",function() { 
 
     for (var i = 0; i < arrayOfXY.length; i++) { 
 
      var x = arrayOfXY[i].x; 
 
      var y = arrayOfXY[i].y; 
 
      alert("x axis:"+x+" and y axis:"+y); 
 
      console.log("x axis:"+x+" and y axis:"+y); 
 
     } 
 
    }); 
 
    
 
    $(".saveCoordinates").on("click",function() { 
 
     $.ajax({ 
 
      url: "Ur url", 
 
      type:"POST", 
 
      data: {coordinates:arrayOfXY}, 
 
      success:function(data){ 
 
       alert("Success"); 
 
      }, 
 
      error: function(){ 
 
       alert("ERROR"); 
 
      } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;"> 
 
<button class="showCoordinates">Show saved coordinates</button> 
 
<button class="saveCoordinates">Save coordinates in DB</button>

出典

2017-02-07 09:29:11

@Anvesh別の方法があります。 2D配列を使用してxy座標を保存し、foreachループを実行して表示し、その配列全体をサーバーに保存することができます。あなたはその答えが欲しいのですか？ –

はい私はそれを望んでいます。あなたがそれを助けることができます！ – Anvesh

もちろん、私は答えを投稿する –

イメージ上のマウスクリックを検出してデータベースに格納します。

答えて

関連する問題