SOURCE

const data = {
    url: 'https://img2.baidu.com/it/u=3783621679,3256730983&fm=253&fmt=auto&app=138&f=JPG?w=500&h=421',
    pointList: [
        {
            info: '第一个坐标',
            points: [10, 10, 100, 10, 100, 50, 20, 50]
        },
        {
            info: '第二个坐标',
            points: [110, 110, 300, 110, 300, 150, 110, 150]
        }
    ]
}
const imgEl = document.getElementById('img')
const boxEl = document.getElementById('box')
let imgElWidth = 0;
let imgElHeight = 0;
let imgElTop = 0;
let imgElLeft = 0;
let scaleNum = 1 // 缩放比例
let pointList = [] // 绘制数据 需要组装
let drawFlag = false

const fatmat = (data) => {
    const xList = []
    const yList = []
    data.forEach((item, index) => {
        if (index % 2 === 0) {
            xList.push(item)
        } else {
            yList.push(item)
        }
    })

    let top = Math.min(...yList);
    let left = Math.min(...xList);
    let width = Math.max(...xList) - Math.min(...xList);
    let height = Math.max(...yList) - Math.min(...yList);
    return { top, left, width, height }
}
// 处理数据
data.pointList.forEach((item) => {
    item.location = fatmat(item.points)
    pointList.push(item)
})

const imageEl = new Image()
imageEl.src = data.url
imageEl.onload = (e) => {
    // 图片加载完毕 绘制底图和宽高
    imgElWidth = imageEl.width
    imgElHeight = imageEl.height
    imgEl.style.backgroundImage = `url(${data.url})`
    // 得到缩放比例
    scaleNum = Math.min(boxEl.offsetWidth / imgElWidth, boxEl.offsetHeight / imgElHeight)
    imgElTop = (boxEl.offsetHeight - imgElHeight * scaleNum) / 2
    imgElLeft = (boxEl.offsetWidth - imgElWidth * scaleNum) / 2
    imgEl.style.top = imgElTop + 'px'
    imgEl.style.left = imgElLeft + 'px'
    imgEl.style.width = imgElWidth * scaleNum + 'px'
    imgEl.style.height = imgElHeight * scaleNum + 'px'
    // 绘制元素
    drawFn(pointList)
}

// 绘制方法
let drawFn = (data) => {
    const itemEl = boxEl.getElementsByClassName('item')
    for (let x = 0; x < itemEl.length; x++) {
        boxEl.removeChild(itemEl[x])
    }

    data.forEach((item) => {
        let el = document.createElement('div')
        el.className = 'item'
        el.innerText = item.info
        el.style.position = 'absolute'
        el.style.width = item.location.width * scaleNum + 'px'
        el.style.height = item.location.height * scaleNum + 'px'
        el.style.top = imgElTop + item.location.top * scaleNum + 'px'
        el.style.left = imgElLeft + item.location.left * scaleNum + 'px'
        el.style.border = '1px solid red'
        el.onclick = function () {
            console.log('这是携带的对应信息', item.info)
            alert(`这是携带的对应信息：${item.info}，坐标信息为：${item.points.join('、')}`)
        }
        el.onmousedown = el.onmouseup = (e) => {
            e.target === el && (drawFlag = false)
        }
        boxEl.appendChild(el)
    })
}

// 因为canvas会缩放，所以需要根据缩放比例计算出位置
let dragPoints = []
let downInfo = {}
imgEl.onmousedown = (down) => {
    // 清空 重置
    if (drawFlag) {
        return;
    }
    drawFlag = true;
    downInfo.x = down.offsetX
    downInfo.y = down.offsetY
    dragPoints = []
}

imgEl.onmousemove = (e) => {
    if (!drawFlag) {
        return;
    }
    e.preventDefault();
}

imgEl.onmouseup = (up) => {
    if (!drawFlag) {
        return;
    }
    drawFlag = false;
    // 计算八点坐标 赋值
    dragPoints.push(Math.floor(downInfo.x / scaleNum), Math.floor(downInfo.y / scaleNum))
    dragPoints.push(Math.floor(downInfo.x / scaleNum), Math.floor(up.offsetY / scaleNum))
    dragPoints.push(Math.floor(up.offsetX / scaleNum), Math.floor(up.offsetY / scaleNum))
    dragPoints.push(Math.floor(up.offsetX / scaleNum), Math.floor(downInfo.y / scaleNum))
    pointList.push({
        info: '新增的',
        points: dragPoints,
        location: fatmat(dragPoints),
        isDelete: true
    })
    dragPoints = []
    // 开始绘制
    drawFn(pointList)
}

boxEl.onmousedown = boxEl.onmouseup = (e) => {
    e.target === boxEl && (drawFlag = false)
}

<div id="box">
    <div id="img"></div>
</div>

#box{
    width: 500px;
    height: 600px;
    background-color: #ccc;
    display: flex;
    align-items: center;
    position: relative;
}
#img{
    position: absolute;
    background-size: 100% 100%;
}
.item{
    font-size: 12px;
    user-select: none;
}