Javascript 当我用鼠标移动图像时，如何获得图像的X和I？

我有一个图像，我可以通过鼠标拖动在画布中移动，我可以获得鼠标坐标，但我真正想要的是获得图像的坐标

我尝试过使用getBoundingClientRect（）函数，但它只返回原始值 图像的位置

当鼠标事件为“mouseup”时，我不知道如何获取图像的当前位置

let position=img.getBoundingClientRect（）；
控制台日志（position.top，position.left）；
document.getElementById（“inp”）.onchange=函数（e）{
img=新图像（）；
img.onload=牵引；
img.onerror=失败；
img.src=URL.createObjectURL（this.files[0]）；
}
函数绘图（）{
ctx.drawImage（this，0，0）；
var-down=false；
canvas.addEventListener(
“加载”，
函数（）{
for（设i=0；i

let position =  img.getBoundingClientRect();
console.log(position.top, position.left);



document.getElementById("inp").onchange = function(e) {
            img = new Image();
            img.onload = draw;
            img.onerror = failed;
            img.src = URL.createObjectURL(this.files[0]);
  }

    function draw() {
        ctx.drawImage(this, 0, 0);

        var down = false;

        canvas.addEventListener(
          "load",
          function () {
              for (let i = 0; i < cuadros.length; i++) {
                  cuadros[i].draw();
              }
              docker.draw();
          },
          false
        );

        canvas.addEventListener(
            "mousedown",
            function() {
                down = true;
                var punto_de_agarre = oMousePos(canvas, event);
                dx -= punto_de_agarre.x;
                dy -= punto_de_agarre.y;
            },
            false
        );
        canvas.addEventListener(
            "mouseup",
            function() {
                down = false;
                m = oMousePos(canvas, event);
                dx += m.x;
                dy += m.y;

                let position =  img.getBoundingClientRect();
                console.log(position.top, position.left);
            },
            false
        );
        canvas.addEventListener(
            "mousemove",
            function(event) {
                if (down) {
                    clear();
                    m = oMousePos(canvas, event);
                    ctx.drawImage(img, m.x + dx, m.y + dy);
                }

                for (let i = 0; i < cuadros.length; i++) {
                    cuadros[i].draw();
                }

                docker.draw();
            },
            false
        );

        function clear() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    }
    function failed() {
        console.error(
            "El archivo proporcionado no se pudo cargar como un medio de imagen"
        );
    }

    function oMousePos(canvas, evt) {
        let ClientRect = canvas.getBoundingClientRect();
        return {
            // Objeto
            x: Math.round(evt.clientX - ClientRect.left),
            y: Math.round(evt.clientY - ClientRect.top)
        };
    }