两张图片进行分析，可以拖动左边图片进行放大、缩小查看图片差异

 

底图

 

<template>
   
   <div class="box_container">
    <section>
      <div class="" v-for="item in imgData.imgDataVal" :key="item.id">
        <img :style="{
          width: boxStyle.width + '%',
          top: boxStyle.top,
          left: boxStyle.left,
        }" :src="item.src" :alt="item.name" />

        <div v-if="clickState" class="selectRegion"
          :style="{ top: selectRegionStyle.top, left: selectRegionStyle.left }"></div>
        <div class="text">
          <p>{{ item.name }}</p>
        </div>

      </div>
      <div ref=" moveDom" id="moveDom"></div>


    </section>

    <p   class="p-diff">差别【不准确】: {{ differencePercentage }}%</p>
  </div>
</template>

<script lang="ts" setup>
  
import imageYT from '../assets/yt.png';
import imageFX from '../assets/fx.png';
import pixelmatch from 'pixelmatch';

import { reactive, ref, onMounted, onBeforeUnmount } from 'vue';
  
 
 
let differencePercentage = ref(0);
onMounted(() => {
  compareImages();
});
function compareImages() {
  const imgA = document.createElement('img');
  const imgB = document.createElement('img');

  imgA.onload = () => {
    imgB.onload = () => {
      const width = imgA.width;
      const height = imgA.height;
      const canvasA = document.createElement('canvas');
      const canvasB = document.createElement('canvas');
      canvasA.width = width;
      canvasA.height = height;
      canvasB.width = width;
      canvasB.height = height;
      const ctxA = canvasA.getContext('2d') as any;
      const ctxB = canvasB.getContext('2d') as any;
      ctxA.drawImage(imgA, 0, 0);
      ctxB.drawImage(imgB, 0, 0);
      const dataA = ctxA.getImageData(0, 0, width, height);
      const dataB = ctxB.getImageData(0, 0, width, height);
      const diff = pixelmatch(dataA.data, dataB.data, null, width, height);
      differencePercentage.value =
        100 - parseInt(((diff / (width * height)) * 100).toFixed(2));
    };
    imgB.src = imageFX as any;
  };
  imgA.src = imageYT as any;
}

let imgData = reactive({
  imgDataVal: [
    {
      id: 1,
      name: '原始图',
      src: imageYT
    },
    {
      id: 2,
      name: '分析图',
      src: imageFX
    }
  ]
})

/**
 * @description: 添加鼠标事件
 * @return {*}
 */

const init = () => {
  moveDom.value = document.getElementById('moveDom')
  moveDom.value.addEventListener('mousemove', moveEvent)
  moveDom.value.addEventListener('wheel', wheelEvent)
  moveDom.value.addEventListener('mousedown', mousedownEvent)
  moveDom.value.addEventListener('mouseup', mouseupEvent)
  moveDom.value.addEventListener('mouseout', mouseoutEvent)
  moveDom.value.addEventListener('mouseover', mouseoverEvent)
}
onMounted(() => {

  init()
})


 const moveDom: any = ref(null);
const images: any = ref(null);
images.value = document.getElementsByClassName('chatImgs');
/**
 * @description: 卸载鼠标事件
 * @return {*}
 */
onBeforeUnmount(() => {
  moveDom.value.removeEventListener('mousemove', moveEvent);
  moveDom.value.removeEventListener('mouseleave', wheelEvent);
  moveDom.value.removeEventListener('mousedown', mousedownEvent);
});
const boxStyle = ref({
  width: 50,
  top: '50%',
  left: '50%',
});
const selectRegionStyle = ref({
  top: '50%',
  left: '50%',
});
const moveX = ref(null);
const moveY = ref(null);

/**
 * @description: 鼠标移动事件
 * @param {*} e
 * @return {*}
 */
const moveEvent = (e: any) => {
  moveX.value = e.offsetX;
  moveY.value = e.offsetY;
  selectRegionStyle.value.left = `${e.offsetX}px`;
  selectRegionStyle.value.top = `${e.offsetY}px`;
  if (clickState.value) {
    boxStyle.value.top = `${e.offsetY}px`;
    boxStyle.value.left = `${e.offsetX}px`;
  }
};
/**
 * @description: 滚轮事件
 * @param {*} e
 * @return {*}
 */
const wheelEvent = (e: any) => {
  if (e.deltaY < 0) {
    if (boxStyle.value.width > 200) {
      return;
    }
    boxStyle.value.width = boxStyle.value.width + 10;
  } else {
    if (boxStyle.value.width < 50) {
      return;
    }
    boxStyle.value.width = boxStyle.value.width - 10;
  }
};

const clickState = ref(false);
const overState = ref(false);
/**
 * @description: 鼠标左键按下事件
 * @param {*} e
 * @return {*}
 */
const mousedownEvent = (e: any) => {
  clickState.value = true;
  overState.value = true;
};
/**
 * @description: 鼠标移入事件
 * @param {*} e
 * @return {*}
 */
const mouseoverEvent = (e: any) => {
  if (overState.value) {
    clickState.value = true;
  }
};
/**
 * @description: 鼠标左键抬起事件
 * @param {*} e
 * @return {*}
 */
const mouseupEvent = (e: any) => {
  clickState.value = false;
  overState.value = false;
};
/**
 * @description: 鼠标移出事件
 * @param {*} e
 * @return {*}
 */
const mouseoutEvent = (e: any) => {
  clickState.value = false;
};
</script>

<style scoped lang="scss">
.box_container {
  width: 100vw;
  height: 100vh;

  padding: 0;

}


section {
  width: 100%;
  height: 85%;
  display: flex;
  justify-content: center;
  justify-items: center;


  >div {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #0decb8da;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.07);

    img {
      width: 100%;
      position: absolute;
      transform: translate(-50%, -50%);
      z-index: 0;

    }

    .selectRegion {
      position: absolute;
      width: 100px;
      height: 100px;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(0, 0, 0, 0.3);

    }
  }

  // 左边区域可以拖动
  #moveDom {
    width: 49.8%;
    height: 85.0%;
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
  }

  >div:nth-child(1) {
    margin-right: 5px;
  }

  >div:nth-child(2) {
    cursor: no-drop;
    margin-left: 5px;
  }

  .text {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);

    p {
      width: 100%;
      height: 100%;
      line-height: 100%;
      text-align: center;
      line-height: 50px;
      // color: #333;
      color: #fff;
      font-weight: 600;
      letter-spacing: 10px;
      font-size: 18px;
    }
  }
}
.p-diff{
  display: flex;
  justify-content: center;
  margin-top: 20px;
  font-size: 20px;
  font-weight:600
}
</style>