通过鼠标拖拉获取图片原像素的两个点坐标vue

<template>
  <div>
    <img
      class="no-drag"
      ref="image"
      src="https://dashanbook.oss-cn-shenzhen.aliyuncs.com/11.png"
      @mousedown="startSelection"
      @mousemove="updateSelection"
      @mouseup="endSelection"
      height="600px"
    />
    <div
      v-if="showHighlightBox"
      class="highlight-box"
      :style="{
        width: selectionWidth + 'px',
        height: selectionHeight + 'px',
        left: selectionLeft + 'px',
        top: selectionTop + 'px',
      }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: null,
      startY: null,
      endX: null,
      endY: null,

      mouseX: 0,
      mouseY: 0,
      selectionStartX: 0,
      selectionStartY: 0,
      selectionEndX: 0,
      selectionEndY: 0,
      showHighlightBox: false,
    };
  },
  //获得原图片像素的的长与宽
  mounted() {
    const image = this.$refs.image;
    image.addEventListener("load", () => {
      this.naturalWidth = image.naturalWidth;
      this.naturalHeight = image.naturalHeight;
    });
  },

  methods: {
    startSelection(event) {
      const image = this.$refs.image;
      const rect = image.getBoundingClientRect();
      this.startX =
        (event.clientX - rect.left) * (this.naturalWidth / image.width);
      this.startY =
        (event.clientY - rect.top) * (this.naturalHeight / image.height);

      this.selectionStartX = event.pageX;
      this.selectionStartY = event.pageY;
      console.log("startSelection============================");
      this.showHighlightBox = true;
    },
    updateSelection(event) {
      const image = this.$refs.image;
      const rect = image.getBoundingClientRect();
      this.endX =
        (event.clientX - rect.left) * (this.naturalWidth / image.width);
      this.endY =
        (event.clientY - rect.top) * (this.naturalHeight / image.height);

      this.mouseX = event.pageX;
      this.mouseY = event.pageY;
      this.selectionEndX = this.mouseX;
      this.selectionEndY = this.mouseY;
    },
    endSelection() {
      const image = this.$refs.image;
      const rect = image.getBoundingClientRect();
      this.endX =
        (event.clientX - rect.left) * (this.naturalWidth / image.width);
      this.endY =
        (event.clientY - rect.top) * (this.naturalHeight / image.height);
      console.log(
        `Point 1: (${this.startX},${this.startY},${this.endX},${this.endY})`
      );
      console.log(`Point 2: (${this.endX}, ${this.endY})`);

      this.showHighlightBox = false;
      // calculate dimensions of highlight box and determine selected objects
    },
  },
  computed: {
    selectionWidth() {
      return Math.abs(this.selectionEndX - this.selectionStartX);
    },
    selectionHeight() {
      return Math.abs(this.selectionEndY - this.selectionStartY);
    },
    selectionLeft() {
      return Math.min(this.selectionStartX, this.selectionEndX);
    },
    selectionTop() {
      return Math.min(this.selectionStartY, this.selectionEndY);
    },
  },
};
</script>

<style>
.highlight-box {
  position: absolute;
  border: 1px dashed black;
  pointer-events: none;
}
.no-drag {
  -webkit-user-drag: none;
}
</style>