圖片 / 相片工作室

前後對照滑桿

製作前後對照,編輯標籤並即時拖曳滑桿比較。下載內含兩張圖片的可攜式HTML檔案、動畫GIF擦拭效果,或在支援的瀏覽器中下載WebM檔案。

前後對照滑桿: 使用前方圖片的比例,並將後方圖片置中裁切以符合版面。HTML下載檔案會以data URI內含兩張PNG圖片,並提供自己的鍵盤無障礙範圍滑桿。GIF擦拭效果會限制在480 by 480 pixels內;瀏覽器支援錄製時,WebM擦拭效果會錄製約two seconds。 全程在瀏覽器中於本機執行,檔案不會上傳至伺服器。

使用次數
在瀏覽器中
費用
免費・免註冊
可用狀態
可立即使用
前後比較滑桿本機處理

全程在瀏覽器中執行

套用至下一次點陣圖匯出。
選擇之前的相片

點選、拖放或貼上·僅保留在此裝置

選擇之後的相片

點選、拖放或貼上·僅保留在此裝置

之前的照片決定比例;之後的照片會從中央裁切以符合尺寸。靜態圖片和HTML圖片會縮放至1200 × 1200 pixels以內。GIF擦拭動畫會縮放至480 × 480 pixels以內。

HTML匯出檔會在同一個檔案中包含圖片和滑桿程式碼。在瀏覽器中開啟檔案即可拖曳滑桿或使用方向鍵。

即時比較

請選擇兩張相片以進行比較。

此瀏覽器無法錄製WebM。請改為下載GIF擦除動畫。

可攜式比較

兩張圖片會正規化為相同比例,並以PNG資料URI嵌入HTML。原生範圍輸入控制可見的後製圖片區域,並支援鍵盤方向鍵。檔案包含內嵌JavaScript,限制性較高的代管政策可能會封鎖它。

動畫匯出

錄製前會先檢查WebM是否可用。當WebM或畫布擷取功能無法使用時,會改用GIF。MediaRecorder支援檢查:https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported_static

使用方式

  1. 選擇前後照片。
  2. 新增標籤並移動比較滑桿。
  3. 下載可互動的HTML滑桿,或下載GIF與支援的WebM動畫擦拭效果。

隱私與限制

您的輸入內容與圖片會留在瀏覽器中。不會上傳任何內容。

相關工具

常見問題

HTML可以離線使用嗎?

可以。它會將兩張圖片與滑桿程式碼放在同一個檔案中,不會發出外部請求。

為什麼WebM無法使用?

瀏覽器必須支援WebM錄製與canvas擷取。如果瀏覽器不支援,請改用GIF擦拭效果。

這和圖片比較滑桿有什麼不同?

本頁可以匯出可運作的HTML滑桿與動畫擦拭效果;圖片比較滑桿則會匯出靜態PNG,也包含並排版面。

免費工具・使用在瀏覽器中次・免註冊