Jquery 调整图像大小时，如何调整图像贴图的坐标？

在我的一个管理页面中，我有如下div：

<div class="row">
    <div class="col-lg-12">
        <a href="#" id="btnCreateSelector">Mark Image area</a>
    </div>
    <div class="col-lg-12">
        <div id="canvas" style="position:relative;width:800px;">
            <img src="img/1324_2041.jpg" style="width:100%;height:auto;" class="img-responsive" />
        </div>
    </div>
</div>

现在，单击“btnCreateSelector”时，会创建一个可拉伸的覆盖div，该div基本上用于选择图像上稍后用作图像热点的区域。该叠加div还包含保存按钮，用于保存捕获和保存选定区域的坐标

$('#btnCreateSelector').click(function() {
    var guid = $.fn.genUID();

    var string = '<div id="' + guid + '" data-id="'+ guid +'" class="area area-unsaved" style="box-sizing: content-box;top: 0; left: 0; width: 140px; height: 140px;">';

    string += '<a href="#" id="' + guid + '" data-id="'+ guid +'" class="btnSave btn btn-info btn-xs" title="Save"><span class=" glyphicon glyphicon-floppy-save"></span></a> ';
    string += '<a href="#" id="' + guid + '" data-id="'+ guid +'" class="btnEdit btn btn-warning btn-xs" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a> ';
    string += '<a href="#" id="' + guid + '" data-id="'+ guid +'" class="btnDelete btn btn-danger btn-xs" title="Delete"><span class="glyphicon glyphicon-remove"></span></a>  ';
    string += "</div>";
    $("#canvas").append(string);
    $(".area").resizable({
        handles: "n, e, s, w, nw, ne, sw, se",
        minHeight: 1,
        minWidth: 1,
    }).draggable();
});

$(document).on("click", ".btnSave", function (e) {
    e.preventDefault();
    var id = $(this).attr("data-id");
    curr_div_id = id;

    var t = parseFloat($("#" + id).css("top"));
    var l = parseFloat($("#" + id).css("left"));
    var w = parseFloat($("#" + id).css("width"));
    var h = parseFloat($("#" + id).css("height"));

    $.ajax({
        url:"<?=site_url();?>pm/maparea/add/",
        type:"POST",
        data: {m_top: t, m_left: l, m_width: w, m_height: h},
        success: function (response) {
            if(response == '1')
            {
                alert('success');
            }
        },
        error: function(response) {
            alert(response);
        }
    });
});

在一个公众可以访问的页面中，我显示了上面的图像1324_2041.jpg，上面有图像热点

<div id="vas">
    <img src="<?=site_url();?>assets/admin/uploads/pages_img/1324_2041.jpg" usemap="#article_map"  class="img-fluid" />
    <map name="article_map">
        <area shape="rect" coords="137.025,327.20625,581.175,556.36875" href="#" alt="Sun">
    </map>
</div>

---

现在，从这里开始我的问题。从数据库获得的坐标与预期的图像部分不重叠。它们在桌面视图、平板视图或移动设备上处于关闭状态。请告知我哪里出错。我是否正确捕获坐标？调整图像大小时如何捕获或调整坐标

最好改用svg，因为它具有响应性。图像地图不再常用于任何可能的副本