Question

我正在尝试建立一个网站，用户可以在其中上传图像并与给定的工具进行交互。但是我不能做我想做的事。我想在图像上添加标记，但是我做过的事情（搜索并发现）将标记添加到网站的整个身体部位。如何仅限制img部分？

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <input type="file" onchange="previewFile()"><br>
  <img id="myImg" src="" alt="Image preview...">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
  </script>
  <script>
    $(document).ready(function() {
      $(function() {
        $(":file").change(function() {
          if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
          }
        });
      });

      function imageIsLoaded(e) {
        $('#myImg').attr('src', e.target.result);
      };
      
      $(document).click(function(ev) {
        $(".marker").remove();
        $("body").append(
          $('<div class="marker"></div>').css({
            position: 'absolute',
            top: ev.pageY + 'px',
            left: ev.pageX + 'px',
            width: '10px',
            height: '10px',
            background: '#000000'
          })
        );
      });
    });
  </script>
</body>
</html>

Answer 1

首先，您将需要一个预览图像容器来捕获图像中的标记。

<div class='img-preview'>
      <img id="myImg" src="" alt="Image preview...">
</div>

然后将容器的CSS设置如下。容器的position应该是relative才能捕获position: absolute元素。

.img-preview{
     position: relative;
     overflow: hidden;
}

单击文档时，必须将其附加到容器内的标记中，以使其停留在容器内。然后从元素的位置中减去容器的顶部和左侧位置进行调整。（因为position: absolute元素的顶部和左侧将从position: relative父元素开始）

$(document).click(function (ev) {
    var prevPos = $(".img-preview").position();
    $(".marker").remove();
    $(".img-preview").append(
        $('<div class="marker"></div>').css({
           position: 'absolute',
           top: (ev.pageY-prevPos.top) + 'px',
           left: (ev.pageX-prevPos.left) + 'px',
           width: '10px',
           height: '10px',
           background: '#000000'
        })
    );
});

就是这样！

如果您想查看结果。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .img-preview{
         overflow: hidden;
         position: relative;
    }
    </style>
  </head>
  <body>
    <input type="file" onchange="previewFile()"><br>
    <div class='img-preview'>
      <img id="myImg" src="" alt="Image preview...">
    </div>
    <script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous">
    </script>
    <script>
    $(document).ready(function(){
      $(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};
        $(document).click(function (ev) {
          var prevPos = $(".img-preview").position();
          $(".marker").remove();
          $(".img-preview").append(
            $('<div class="marker"></div>').css({
              position: 'absolute',
              top: (ev.pageY-prevPos.top) + 'px',
              left: (ev.pageX-prevPos.left) + 'px',
              width: '10px',
              height: '10px',
              background: '#000000'
            })
          );
        });

    });
    </script>
  </body>
</html>

Answer 2

尝试此代码

var image = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q";
var marker = new google.maps.Marker({
        position: location,
        map: globalMap,
        icon: image
});

有关更多信息，请访问How can I modify the markers?

Answer 3

不确切知道您的意思，但是如果您尝试仅在图像内部设置“标记”，请尝试以下操作：

替换

$(document).click(function (ev) ....

使用

    $('img' /* or '#myImg' */).click(function(ev) {
      $(".marker").remove();
      $(this).parent().append(
        $('<div>').addClass('marker').css({
          position: 'absolute',
          top: ev.pageY + 'px',
          left: ev.pageX + 'px',
          width: '10px',
          height: '10px',
          background: '#000000'
        })
      );
    });

onClick侦听器现在仅侦听图像上的点击

如何在用户上传的图像上添加标记？

3 个答案: