Построить координаты на изображении, используя jquery - PullRequest
0 голосов
/ 15 февраля 2020

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

$(document).ready(function () {
$.ajax({
           type: "POST",
           url: "Section.aspx/GetImageData",
           //data: '',
            data: JSON.stringify({ "dataSecName": name }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                   alert("Success");
                   var imgval = JSON.parse(data.d);
                   $.each(imgval, function (i, jsondata) {
                   $("#imgDiv").empty();
                     //console.log(jsondata.ImageName);
                    console.log(jsondata.XCordinate);
                    console.log(jsondata.YCordinate);
                    var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
                    img.attr('src', "../Administration/imageHotspot/" + jsondata.ImageName);
                    img.appendTo('#imgDiv');
                    $("#dynamic").height(500);
                    $("#dynamic").width(500);
   });
});

Здесь изображение успешно отображается. Теперь я хочу использовать этот график значения координат на этом изображении. Я написал код для построения, но ничего не получается

  $.each(imgval, function (i, jsondata) {
                            //$("body").append(
                            $("#dynamic").append(
                                  $('<div></div>').css({
                                    position: 'absolute',
                                      top: jsondata.YCordinate + 'px',
                                      left: jsondata.XCordinate + 'px',
                                    //top: event.pageY + 'px',
                                    //left: event.pageX + 'px',
                                    width: '10px',
                                    height: '10px',
                                    background: '#dd4b39',
                                    'border-radius': '10px'
                                })
                            );

                        });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...