🌗
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 改造
分享您親手改造花園、組裝家具或模型的前後對比。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback sent successfully. Thank you for your cooperation!
An error occurred. Please try again later.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.