原始链接在： https://www.appinn.com/imgsli/
imgsli 是一个相当简单的服务，它能帮你创建一个在线的可滑动对比照片相册。比如帮客户 P 图之后，用来展示与原图之间的差别，支持放大，支持多张图片对比。@Appinn
的确是青小蛙在干别的时候发现的服务，还真是简单、干脆，符合 #只有一个功能、#只有一个界面。
进入 imgsli 之后，就能看到劳拉（古墓丽影：崛起）在攀爬岩壁的对比照片，可以左右滑动。
点击 NEW ALBUM 按钮创建你自己的相册：
图片会上传至 imgsli 的服务器，你可以添加标题、每张照片的描述，以及添加多张照片。
等待上传完成，就能得到一个专属 URL，类似：https://imgsli.com/MTY3NDIz 该链接也是青小蛙做的一个测试。
然后，顶部可选其它图片，但同时对比的也只能两张图片，毕竟目前还没办法同时对比三张 😂
很简单的服务。
不知道有没有同学知道类似的开源项目，可以自己搭建那种，求推荐。
原文：https://www.appinn.com/imgsli/
只是做这个两张图片的切换对比的话 有不少方案
w3schools.com/howto/howto_js_image_comparison.asp
web-toolbox.dev/en/tools/image-compare-slider
这里还有合集
hongkiat.com/blog/js-image-comparison-sliders/
这个还得上传照片，感觉可以做一个纯本地的
不错不错，收藏有用
有人做了一个这个网站功能的本地版本，UI稍微有些糙，但是功能一样，本地速度快。
有没有 拖入2张图片 叠加对比 的软件？像美图秀秀修改前后的对比显示
faststone image viewer 的图片对比 有这效果，但是不能直接拖入，打开过程比较繁琐
@hooke007 @lemmo
大佬就是大佬，完全没注意什么时候多了这个功能
从网上找的代码.略作修改. 默认是1.jpg和2.jpg的对比. 可以自己改代码.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片滑动对比本地版</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.slider-wrap {
position: relative;
}
.slider-wrap img {
display: block;
width: 1080px;
user-select: none;
}
.slider-wrap .before-img {
position: absolute;
top: 0;
left: 0;
width: 50%;
overflow: hidden;
}
.slider-wrap .handler {
display: block;
width: 5px;
height: 100%;
background-color: rgba(0, 0, 0, .3);
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
cursor: ew-resize;
/* cursor: ew为左右滑动 */
}
.slider-wrap .handler::after {
width: 64px;
height: 64px;
background-color: rgba(0, 0, 0, .5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: '\2b0c';
color: white;
font-size: 50px;
text-align: center;
line-height: 64px;
border-radius: 50%;
box-shadow: 0 2px 6px #000;
transition: all .3s ease;
}
.slider-wrap .handler:hover::after {
width: 40px;
height: 40px;
font-size: 30px;
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<h1>图片滑动对比</h1>
<div class="slider-wrap">
<div class="before-img">
<img src="./1.jpg" alt="">
</div>
<img src="./2.jpg" alt="">
<span class="handler"></span>
</div>
</div>
<script>
const slider = document.querySelector('.slider-wrap'); // 整个滑动区域
const beforeImg = document.querySelector('.before-img'); // 左边图片外框
const handler = document.querySelector('.handler'); // 滑动条
var marginX; // 外部宽度，即滑动区域左侧到浏览器边框的距离
handler.onmousedown = function(e) {
marginX = e.pageX - handler.offsetLeft;
// envent.pageX : 点击时鼠标相对浏览器边框的 X 距离；
// elenment.offsetLeft : 元素 left 属性值。
// 此时，内框absolute，外框relative，所以 left 是相对外框的距离；
slider.addEventListener('mousemove', moveHandler);
}
handler.onmouseup = function(e) {
slider.removeEventListener('mousemove', moveHandler);
}
function moveHandler(e) {
handler.style.left = e.pageX - marginX + 'px';
beforeImg.style.width = e.pageX - marginX + 'px';
// 此时 e.pageX 是鼠标滑动时据浏览器左边的距离，减去外部距离，
// 即得到此时鼠标相对于图片区域的 X 坐标；
// 让滑动条的 left 和左边图片宽度 都等于坐标，即可以达到跟随效果；
}
</script>
</body>
</html>
Compare image
写出来了，windows 本地版。具体信息微软商店搜上面的名字吧