HTML5中可用<canvas>实现像素级图片对比：将两张同尺寸图绘至两个canvas，用getImageData()提取RGBA数据逐点比对，差异像素标红；也可用CSS clip-path+拖拽实现视觉滑动对比；推荐使用pixelmatch库提升性能与容差控制。
用 <canvas> 手动绘制两张图做像素级对比
HTML5 本身没有内置“图片对比”组件，真正能做像素差异检测的只有 <canvas>。核心思路是：把两张图分别绘制到两个 <canvas> 上，用 getImageData() 提取 RGBA 像素数据，逐点比对。
- 两张图必须同尺寸，否则需先缩放到一致（用
drawImage()缩放会模糊，影响差异精度） - 跨域图片会触发
SecurityError：确保图片服务支持 CORS，或本地开发时用python3 -m http.server启服务，别双击打开 HTML 文件 - 差异高亮建议用第三张 canvas 渲染：相同像素设为透明，不同像素设为红色（
r=255,g=0,b=0,a=255），避免覆盖原图
const canvas1 = document.getElementById('c1');
const ctx1 = canvas1.getContext('2d');
const img1 = new Image();
img1.onload = () => {
ctx1.drawImage(img1, 0, 0);
const data1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height).data;
<p>const canvas2 = document.getElementById('c2');
const ctx2 = canvas2.getContext('2d');
const img2 = new Image();
img2.onload = () => {
ctx2.drawImage(img2, 0, 0);
const data2 = ctx2.getImageData(0, 0, canvas2.width, canvas2.height).data;</p><pre class='brush:php;toolbar:false;'>const diffCanvas = document.getElementById('diff');
const diffCtx = diffCanvas.getContext('2d');
const diffData = diffCtx.createImageData(canvas1.width, canvas1.height);
for (let i = 0; i < data1.length; i += 4) {
const r1 = data1[i], g1 = data1[i+1], b1 = data1[i+2], a1 = data1[i+3];
const r2 = data2[i], g2 = data2[i+1], b2 = data2[i+2], a2 = data2[i+3];
if (r1 !== r2 || g1 !== g2 || b1 !== b2 || a1 !== a2) {
diffData.data[i] = 255; // R
diffData.data[i+1] = 0; // G
diffData.data[i+2] = 0; // B
diffData.data[i+3] = 255; // A
}
}
diffCtx.putImageData(diffData, 0, 0);}; img2.src = 'after.png'; }; img1.src = 'before.png';
用 CSS clip-path + 拖拽实现视觉滑动对比（无像素计算）
如果只需要用户手动滑动查看左右/上下差异（比如设计稿 vs 实现效果），不用 JS 计算像素，纯 CSS + 少量 JS 控制即可。本质是把两张图叠在一起，用 clip-path 切出可见区域，并随鼠标/触摸移动更新裁剪范围。
- 兼容性注意：
clip-path在 Safari 15.4+ 才支持inset()动态值，旧版需改用polygon()并频繁重设路径字符串 - 拖拽响应要加
touch-action: none，否则 iOS 会触发页面滚动 - 不要用
transform: translateX()移动图层——会导致边缘模糊；clip-path是像素对齐的
<div class="comparer">
<img src="before.png" alt="before" class="bg">
<img src="after.png" alt="after" class="fg">
</div>
<p>.comparer {
position: relative;
overflow: hidden;
}
.comparer .fg {
position: absolute;
top: 0;
left: 0;
clip-path: inset(0 0 0 50%); /<em> 默认只显示右半边 </em>/
}第三方库 pixelmatch 的实际接入要点
真要做可靠像素比对，推荐用 pixelmatch（npm 包，也提供浏览器 UMD 版）。它比手写循环快得多，还支持抗锯齿容差、忽略抗锯齿色差、输出差异图等。
- 必须传入
width和height，即使 canvas 已设宽高属性——函数不读 DOM，只认参数 - 容差
threshold默认是0.1（即 RGB 各通道差值 ≤25.5 才算相同），UI 类截图建议调到0.2避免因渲染微差误报 - 输出差异图是新
Uint8ClampedArray，需用putImageData()渲染到 canvas，不能直接赋值给src
import pixelmatch from 'pixelmatch';
// ...
const diff = new Uint8ClampedArray(width * height * 4);
const numDiffPixels = pixelmatch(
data1, data2, diff,
width, height,
{ threshold: 0.2 }
);
console.log(`差异像素数：${numDiffPixels}`);移动端触摸拖拽对比的常见失效原因
在手机上拖不动滑块？大概率是事件没正确绑定或阻止了默认行为。
立即学习“前端免费学习笔记（深入）”；
- 用
touchstart/touchmove替代mousedown/mousemove，且必须在touchmove中调用event.preventDefault()，否则 iOS 会抢走 touch 事件 -
clientX在 touch 事件里要取touches[0].clientX，不是event.clientX - 别在
touchend里清空位置状态——手指抬起瞬间可能还有惯性位移，应监听touchcancel并统一处理
像素对比本身不区分设备，但交互层在移动端极易出问题。最稳妥的做法是：先确保桌面端拖拽逻辑 100% 正常，再叠加 touch 事件，而不是写两套逻辑。
