簡單三步驟，輕鬆製作「照片前後比對」的線上工具

之前寫了一篇〈Google相機夜視模式實測：解決禁用閃光燈餐廳展覽拍照難題〉，裡面提供了幾張一般拍照、夜視拍照的對比。讀者回饋說，何不專業一點，使用許多網站中常見的「照片比對特效」呢？

讀者說的很有道理，於是我動手搜尋一下，馬上找到一個行之有年的解決辦法：「JuxtaposeJS」。

「JuxtaposeJS」是好幾年前就已經推出的免費線上工具，讓即使不懂網頁程式碼的朋友，只要貼上圖片網址，就能立刻產生「圖片比對特效」，像是下圖這兩張照片的比對這樣，拉動中間橫感，就能在同一個場景的照片、地圖上直接對照變化。這個工具在台灣的許多新聞報導、科普教學、測試評論等等網頁文章中，已經頗常看到。如果你之前也沒有想到可以這樣利用，那麼記下這個工具，下次需要時就能幫上忙。

「JuxtaposeJS」的使用步驟很簡單。

首先來到「JuxtaposeJS」線上工具網站，點擊「Make Juxtapose」開始製作。

圖片來源：作者提供

製作過程中，先輸入左方圖片的網址，再貼上右方圖片的網址。你可以把圖檔上傳到Dropbox獲得網址，或是上傳到任何可以獲得圖片網址的空間。

在「Label」處填寫圖片說明，例如這是2008年的士林夜市，這是2016年的士林夜市。到時候圖片上方會顯示說明。

而「Credit」澤可以用來填寫圖片的來源。

接著按下「Preview」可以預覽，按下「Publish」可以獲得嵌入網頁的程式碼。

圖片來源：作者提供

我們可以將「JuxtaposeJS」用在下面的用途：

• 老師用來製作古今地圖的比較
• 記者用在今昔街景、建築、人物等的對比
• 評論者用在對於照片的比較，例如相機效果、軟體效果、遊戲場景等等

比起直接羅列照片，可以拉動橫桿直接比較，更加生動直接。

圖片來源：作者提供

圖片來源：作者提供

將這個工具，也分享給有需要，而還不知道「JuxtaposeJS」的朋友。

我之前也有介紹過他的同系列工具：「免費開源時間軸製作TimelineJS視覺化歷史免程式碼」。有這類需求的朋友，還可以參考相關工具的整理：「19個新學期準備考試、做報告、寫筆記的數位學習與研究技能」、「給2017知識工作者與學習者的推薦工具及精選方法特輯」、「21種「知識性」教學素材資源網站，提供老師學生免費下載」。

• 「JuxtaposeJS」網站

本文經電腦玩物授權刊登，原文刊載於此

責任編輯：朱家儀
核稿編輯：翁世航