vue2实现两张图片进行左右的比较，可以位置、缩放大小比较，效果如下：

参考代码如下：（结合自己的项目进行修改改进）

<div v-if="resultFileUrl" class="container" @mousewheel="">
      <div class="image-container left" style="border-right: 1px solid #455a75">
        <img
          draggable="false"
          @mousedown="startDrag('left', $event)"
          @wheel="handleWheel"
          :style="getLeftImageStyle"
          :src="fileUrl"
          alt="Left Image"
          ref="leftImg"
        />
      </div>
      <div class="image-container right">
        <img
          draggable="false"
          @mousedown="startDrag('right', $event)"
          :style="getRightImageStyle"
          :src="resultFileUrl"
          alt="Right Image"
          @wheel="handleWheel"
          ref="rightImg"
        />
      </div>
      <span class="tools">
        <el-tooltip class="item" effect="dark" content="缩小" placement="top">
          <span
            class="iconfont icon-suoxiao"
            @click="imageScale = imageScale - 0.2"
          ></span>
        </el-tooltip>
        <span>{{ parseInt(imageScale * 100) }}%</span>
        <el-tooltip class="item" effect="dark" content="放大" placement="top">
          <span
            class="iconfont icon-tianjia"
            @click="imageScale = imageScale + 0.2"
          ></span>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="自适应" placement="top">
          <span
            class="iconfont icon-quxiaoquanping"
            @click="handleReset"
          ></span>
        </el-tooltip>
      </span>
    </div>


 
<script>
export default {
  data() {
    return {
      fileUrl: "",
      resultFileUrl: "",

      dragging: false,
      dragTarget: "",
      startDragPosition: { x: 0, y: 0 },
      leftImagePosition: { x: 0, y: 0 },
      rightImagePosition: { x: 0, y: 0 },
      imageContainerSize: 500,
      imageScale: 1,
    };
  },
  computed: {
    getLeftImageStyle() {
      return {
        transform: `translate(${this.leftImagePosition.x}px, ${this.leftImagePosition.y}px) scale(${this.imageScale})`,
        width: "100%",
        height: "100%",
      };
    },
    getRightImageStyle() {
      return {
        transform: `translate(${this.rightImagePosition.x}px, ${this.rightImagePosition.y}px) scale(${this.imageScale})`,
        width: "100%",
        height: "100%",
      };
    },
  },
  methods: {
    handleReset() {
      this.startDragPosition = { x: 0, y: 0 };
      this.leftImagePosition = { x: 0, y: 0 };
      this.rightImagePosition = { x: 0, y: 0 };
      this.imageScale = 1;
    },

    startDrag(target, event) {
      this.dragging = true;
      this.dragTarget = target;
      this.startDragPosition = { x: event.clientX, y: event.clientY };

      document.addEventListener("mousemove", this.handleDrag);
      document.addEventListener("mouseup", this.stopDrag);
    },
    stopDrag() {
      if (this.dragging) {
        document.removeEventListener("mousemove", this.handleDrag);
        document.removeEventListener("mouseup", this.stopDrag);
        this.dragging = false;
        this.dragTarget = "";
      }
    },
    handleDrag(event) {
      const that = this;
      if (this.dragging) {
        const deltaX = event.clientX - this.startDragPosition.x;
        const deltaY = event.clientY - this.startDragPosition.y;
        const newPositionX = this[this.dragTarget + "ImagePosition"].x + deltaX;
        const newPositionY = this[this.dragTarget + "ImagePosition"].y + deltaY;

        this[this.dragTarget + "ImagePosition"].x = Math.max(
          Math.min(newPositionX, 350),
          //   Math.min(
          //     newPositionX,
          //     that.imageContainerSize -
          //       that.$refs[this.dragTarget + "Img"].naturalWidth * that.imageScale
          //   ),
          -this.imageContainerSize
        );
        this[this.dragTarget + "ImagePosition"].y = Math.max(
          Math.min(newPositionY, 450),
          //   Math.min(
          //     newPositionY,
          //     that.imageContainerSize -
          //       that.$refs[this.dragTarget + "Img"].naturalHeight *
          //         that.imageScale
          //   ),
          -this.imageContainerSize
        );

        const oppositeTarget = this.dragTarget === "left" ? "right" : "left";
        this[oppositeTarget + "ImagePosition"].x =
          this[this.dragTarget + "ImagePosition"].x;
        this[oppositeTarget + "ImagePosition"].y =
          this[this.dragTarget + "ImagePosition"].y;

        this.startDragPosition = { x: event.clientX, y: event.clientY };
      }
    },
    handleWheel(event) {
      event.preventDefault();
      const scaleChange = event.deltaY > 0 ? -0.1 : 0.1;
      this.imageScale = Math.max(this.imageScale + scaleChange, 0.1);
    },
 
  },
  mounted() {
    document.addEventListener("mousemove", this.handleDrag);
    document.addEventListener("mouseup", this.stopDrag);
  },
  beforeDestroy() {
    document.removeEventListener("mousemove", this.handleDrag);
    document.removeEventListener("mouseup", this.stopDrag);
  },
};
</script>
<style lang="scss" scoped>
.container {
    width: 1160px;
    height: 690px;
    background: #09264a;
    border-radius: 4px;
    border: 1px solid #455a75;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    position: relative;
    .image-container {
      width: 50%;
      overflow: hidden;
      img {
        max-width: 580px;
        max-height: 690px;
        object-fit: contain;
        cursor: pointer;
      }
    }
    .tools {
      position: absolute;
      display: inline-block;
      width: 206px;
      height: 44px;
      line-height: 44px;
      background: #60697c;
      border-radius: 22px;
      opacity: 0.8;
      display: flex;
      padding: 0 30px;
      justify-content: space-between;
      color: #fff;
      font-size: 16px;
      bottom: 20px;
      left: 50%;
      margin-left: -103px;
      & > span {
        cursor: pointer;
      }
    }
  }
</style>