两张图片进行分析

2024-06-04 23:12
文章标签 分析 进行 图片 两张

本文主要是介绍两张图片进行分析,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

 

底图

 

<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>

这篇关于两张图片进行分析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1031394

相关文章

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

MySQL中的表连接原理分析

《MySQL中的表连接原理分析》:本文主要介绍MySQL中的表连接原理分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、环境3、表连接原理【1】驱动表和被驱动表【2】内连接【3】外连接【4编程】嵌套循环连接【5】join buffer4、总结1、背景

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

python中Hash使用场景分析

《python中Hash使用场景分析》Python的hash()函数用于获取对象哈希值,常用于字典和集合,不可变类型可哈希,可变类型不可,常见算法包括除法、乘法、平方取中和随机数哈希,各有优缺点,需根... 目录python中的 Hash除法哈希算法乘法哈希算法平方取中法随机数哈希算法小结在Python中,

Java Stream的distinct去重原理分析

《JavaStream的distinct去重原理分析》Javastream中的distinct方法用于去除流中的重复元素,它返回一个包含过滤后唯一元素的新流,该方法会根据元素的hashcode和eq... 目录一、distinct 的基础用法与核心特性二、distinct 的底层实现原理1. 顺序流中的去重

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

使用Python进行GRPC和Dubbo协议的高级测试

《使用Python进行GRPC和Dubbo协议的高级测试》GRPC(GoogleRemoteProcedureCall)是一种高性能、开源的远程过程调用(RPC)框架,Dubbo是一种高性能的分布式服... 目录01 GRPC测试安装gRPC编写.proto文件实现服务02 Dubbo测试1. 安装Dubb

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

关于MyISAM和InnoDB对比分析

《关于MyISAM和InnoDB对比分析》:本文主要介绍关于MyISAM和InnoDB对比分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录开篇:从交通规则看存储引擎选择理解存储引擎的基本概念技术原理对比1. 事务支持:ACID的守护者2. 锁机制:并发控制的艺

Python如何去除图片干扰代码示例

《Python如何去除图片干扰代码示例》图片降噪是一个广泛应用于图像处理的技术,可以提高图像质量和相关应用的效果,:本文主要介绍Python如何去除图片干扰的相关资料,文中通过代码介绍的非常详细,... 目录一、噪声去除1. 高斯噪声(像素值正态分布扰动)2. 椒盐噪声(随机黑白像素点)3. 复杂噪声(如伪