🌗
before & after,
Before & After
圖片對比滑桿工具
透過互動式的拖曳滑桿，即時比較兩張圖片的差異。
可將對比畫面一鍵匯出為 PNG 圖片，分享成果超方便。
↔️
互動滑桿對比
支援滑鼠與觸控拖曳比較
📸
一鍵匯出 PNG
可將任意滑桿位置儲存為圖片
🔒
完全本地處理
圖片不上傳，保障隱私與資安
📷 Before (修改前圖片)
點擊或將圖片拖曳至此
✨ After (修改後圖片)
點擊或將圖片拖曳至此
👆 請先在上方選取 Before 與 After 兩張圖片
🔒所有的圖片處理都在您的瀏覽器本地執行，圖片絕對不會被上傳到任何伺服器。
about,
關於本工具
Before & After 圖片對比滑桿工具是一款實用的線上小程式，讓您可以透過互動式的拖曳滑桿，將兩張圖片並排疊加，直觀地展示「修改前」與「修改後」的差異。非常適合用於攝影修圖、裝潢施工、健身成效等場景的展示。
本工具運用先進的 HTML5 Canvas API 技術，讓所有的圖片渲染與裁切都在您的瀏覽器內完成。您不僅能自由拖曳比較，還能將任意滑桿位置的畫面直接匯出為 PNG 圖片，且過程完全沒有隱私外洩的疑慮。
how to,
使用方法
STEP 1
選取圖片
點擊或拖曳，分別上傳「Before (修改前)」與「After (修改後)」兩張圖片。
STEP 2
拖曳滑桿
在出現的對比區域中，使用滑鼠或手指拖曳滑桿，檢視兩張圖片的差異。
STEP 3
匯出結果
調整到滿意的滑桿位置後，點擊「儲存 PNG」將對比結果下載為圖片。
glossary,
名詞解釋
- Before & After (對比圖)
- 用於呈現某個處理、施工或修圖「之前」與「之後」狀態差異的視覺表現方式，通常由兩張照片組成。
- 滑桿對比 (Slider Comparison)
- 一種互動式的 UI 設計，讓使用者可以透過左右拖曳滑桿，在同一個畫面中動態顯示兩張圖片重疊的比例。
- Canvas API
- HTML5 提供的 2D 繪圖 API。本工具利用它來繪製兩張圖片，並在滑桿位置進行遮罩裁切 (Clipping) 以實現對比效果。
- Pointer Events API
- 一種處理滑鼠、觸控與觸控筆輸入的現代 Web API。本工具使用它來確保滑桿在手機與電腦上都能順暢拖曳。
- Clipping (遮罩裁切)
- 將繪圖區域限制在特定形狀內的技術。在對比滑桿中，Canvas 會在滑桿位置被分割，兩側分別顯示不同的圖片。
- Aspect Ratio (長寬比)
- 圖片寬度與高度的比例。建議兩張圖片的長寬比要相同，比較的效果才會最精準。
- PNG (可攜式網路圖形)
- 一種無失真的圖片格式，儲存時不會有畫質減損，且支援透明背景。本工具將結果匯出為此格式。
- WebP
- 由 Google 開發的現代圖片格式，能在提供與 JPEG/PNG 相同畫質的前提下，大幅縮減檔案大小。本工具支援讀取此格式。
faq,
常見問題
- Q.如果兩張圖片的尺寸不一樣怎麼辦？
- 系統會自動將兩張圖片縮放到相同的尺寸進行比較（會保持原來的長寬比）。
- Q.我可以將當前滑桿停留的畫面匯出嗎？
- 可以的。按下「儲存 PNG」按鈕，系統就會將當下畫面上顯示的比較狀態原封不動地匯出成圖片。
- Q.可以隱藏 BEFORE/AFTER 的標籤文字嗎？
- 可以。只要取消勾選設定中的「顯示標籤」即可隱藏。
- Q.支援直向或橫向的圖片嗎？
- 支援。無論是直式或橫式圖片都可以使用，您也可以在設定中將對比方向切換為「水平」或「垂直」。
- Q.圖片會被傳送到任何伺服器嗎？
- 不會的。所有的處理都是透過瀏覽器的 Canvas API 在您的電腦或手機上本地執行，圖片資料絕不會外流。
- Q.支援哪些圖片格式？
- 支援 JPEG、PNG、WebP、靜態 GIF 等所有您的瀏覽器能讀取的常見圖片格式。
- Q.這個滑桿可以在手機上使用嗎？
- 可以的。工具完美支援觸控操作，您只要在對比區域上用手指左右拖曳即可。
- Q.可以一次比較多組圖片嗎？
- 目前一次只能比較一組圖片。建議您將滿意的結果匯出為 PNG 後，再載入新的圖片進行下一組比較。
use cases,
使用場景
🎨
照片修圖與設計
向客戶展示 Photoshop 修圖前與修圖後的驚人差異。
🏗️
建築與室內裝潢
記錄並展示老屋翻新或是施工前後的變化。
⚖️
醫美與健身成果
最直觀地呈現減重、健身或是美容療程的效果。
🌿
園藝與 DIY 改造
分享您親手改造花園、組裝家具或模型的前後對比。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
反饋發送成功。感謝您的合作！
發生錯誤。請稍後再試。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.