並排對比兩張圖片，支援差異高亮、滑塊對比。用於圖片質量對比、前後效果對比。
工具功能
- 多種對比模式: 支援並排對比和滑塊對比兩種模式，滿足不同對比需求
- 差異高亮顯示: 自動檢測並高亮顯示兩張圖片的差異區域，直觀展示差異位置
- 互動式滑塊: 滑塊對比模式下，可拖動滑塊查看不同區域，精確對比細節
- 精確像素檢測: 使用像素級比較算法，精確檢測圖片差異，支援自訂差異閾值
使用方法
- 第一步: 上傳需要對比的兩張圖片。
- 第二步: 選擇對比模式（並排對比或滑塊對比）並開啟差異高亮（可選）。
- 第三步: 查看對比結果，調整滑塊位置或差異閾值以獲得最佳對比效果。
生成原理
圖片對比原理
圖片對比通過像素級比較兩張圖片的差異。並排對比：將兩張圖片並排顯示，便於直觀對比；滑塊對比：使用滑塊控制顯示區域，可以左右拖動查看不同部分；差異高亮：計算兩張圖片的像素差異，將差異區域用紅色高亮顯示。使用 Canvas API 的 getImageData() 獲取像素數據，逐像素比較 RGB 值，計算差異度並可視化。
像素差異檢測
實現方法：載入兩張圖片到 Canvas → getImageData() 獲取像素數據 → 逐像素比較 RGB 值 → 計算差異度（|R1-R2|+|G1-G2|+|B1-B2|）→ 超過閾值則標記為差異 → 生成差異圖（紅色高亮差異區域）。支援：自訂差異閾值、即時預覽、滑塊互動、並排顯示等。
創意與實用場景
圖片對比應用於：設計審查（對比設計稿和實現效果）、質量檢查（對比原圖和壓縮後圖片）、前後對比（對比處理前後的效果）、版本對比（對比不同版本的圖片）、測試驗證（對比預期和實際結果）、學習研究（對比不同參數的效果）。幫助快速發現圖片差異和進行質量評估，是圖片處理的實用工具。
常見問題
- 有哪些對比模式？
- 工具提供兩種對比模式：並排對比（兩張圖片並排顯示，便於整體對比）和滑塊對比（使用滑塊控制顯示區域，可以拖動查看不同部分）。滑塊對比模式適合需要精確對比細節的場景。
- 差異高亮是如何工作的？
- 差異高亮通過像素級比較兩張圖片，計算每個像素的 RGB 差異值。當差異超過設定的閾值時，將該區域用紅色高亮顯示。可以調整差異閾值來控制高亮的敏感度。
- 可以對比不同尺寸的圖片嗎？
- 可以，工具會自動處理不同尺寸的圖片。在差異檢測時，會以較大圖片的尺寸為準，較小圖片會按比例顯示。
- 滑塊對比如何使用？
- 在滑塊對比模式下，拖動中間的滑塊可以控制顯示區域。滑塊左側顯示第一張圖片，右側顯示第二張圖片。可以通過拖動滑塊來精確對比不同區域的細節。
- 差異閾值如何設置？
- 差異閾值控制差異檢測的敏感度。閾值越小，越容易檢測到細微差異；閾值越大，只顯示明顯差異。建議根據實際需求調整，一般設置為 20-50 之間。
相關文件
- MDN - Canvas API - HTML5 Canvas API 圖像處理和操作
- MDN - ImageData API - Canvas ImageData 介面文檔
- Web.dev - 圖像優化 - Web圖像優化最佳實踐