Javascript 如何在图像上绘制四个点？

我希望能够在我上传的图像上放置四个点。到目前为止，让我画一个点，有没有办法画四个独立的点

<img src="null.png" id="marker" style="position: absolute;" /> 


<script> 
    $('#marker')
       .css('left', e.pageX)
       .css('top', e.pageY)
       .show();
   </script>

---

如果您想在每个角点上添加一个点，一个简单的方法是使用div容器包装img，使其“位置相对，以便其所有”子元素都相对于它进行定位，然后添加四个元素，每个元素可以按照您的喜好进行定位。您可以在不使用javascript的情况下实现这一点：

HTML

---

您还可以将每个点的位置更改为您想要的任何位置。

放置点的代码在哪里？id=标记的img仅为图像。你是否有一个不同的div来定义你所说的标记？放置四个点？你在代码中设置了css属性left和top。哦，我忘了在问题中添加click函数。现在将id=marker更改为div。这是OP问题的正确解决方案，但是，我认为OP不知道他到底在问什么。嗨，谢谢，不过我实际上不想画角。所以我想上传一张图片，用鼠标点击绘制四个点，绘制新的角点，最终能够转换透视图。我有代码上传和转换，但无法绘制我想要的四个角。在这种情况下，要执行类似于@PLau的操作，您需要编写响应鼠标单击事件的代码，并将每个点的位置设置为其在图像上的正确位置。这里提供的代码示例应该是一个足够好的静态示例，以显示可以将点放置在相对于图像的任何位置。也可以使用百分比而不是像素。

<div class="img-wrapper">
    <img src="null.png" id="marker" />
    <span class="img-corner top-left"></span>
    <span class="img-corner top-right"></span>
    <span class="img-corner bottom-left"></span>
    <span class="img-corner bottom-right"></span>
</div>

.img-wrapper {
    position: relative;
    display: inline-block;
}

.img-corner {
    position: absolute;
    display: block;
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 3px;
}

.top-left: {
    left: 0;
    top: 0;
}

.top-right: {
    right: 0;
    top: 0;
}

.bottom-left: {
    left: 0;
    bottom: 0;
}

.bottom-right: {
    right: 0;
    bottom: 0;
}