JS Image Carver – 免費內容感知圖片調整尺寸工具，自動偵測圖片元素間的距離並自動演算生成新的圖片

JS Image Carver 是一個非常厲害的免費開源項目，它的功能可以幫助我們自動偵測所上傳的圖片裡，每個元素之間彼此的間距，並且讓你自訂圖片的長寬百分比，自動透過內容感知技術，將圖片當中的元素距離進行重塑，形成一張內容元素更為緊密的圖片。

內容感知調整圖片大小

一般而言，當我們在更改圖片大小時，通常只是縮小整張圖片的長寬比，而圖片當中的物件之間的距離是不會變動的，這就會導致圖片雖然達到你要的尺寸，但是圖片內容卻是變的太小。

除此之外，比較明顯的差異在於，當我們要保持圖片的高度，同時縮小圖片的寬度時，一般的縮放工具會使得圖片的某一部分被裁切，或是整張圖片的比例扭曲變形。此時如果採用內容感知技術，就能夠在更改圖片比例的同時，保留圖片當中各種元素的距離，這裏就採用了「Seam Carving algorithm」來達成。

從下面的演變圖當中，你就能清楚的看到，圖片中間是原始圖片，左邊是採用內容感知技術後，在減少圖片寬度 50% 與高度減少 70% 的情況下，所產生的結果；另外一方面，右邊的圖片則是一般直接將圖片進行縮放後的結果。

Pin

從上方的圖片是不是就能清楚的了解，當你的圖片透過內容感知技術進行縮放後，能夠幫助你的圖片形成更好的的比例大小。

它的演算法主要是找到對整體圖片當中影響最小的像素，然後透過不斷去除的動作，直到圖片大小達到你所指定的寬與高。因此如果我們使用動態圖片來觀看他的縮放過程，妳就能很清楚的看到它的變化，從熱氣球比天空對於整體圖片的貢獻度較高，因此它首先會刪除天空的像素：

Pin

如果你想進一步了解其原理作用的話，作者團隊已經將此專案開源在 Github 上，你可以前往去進行更深入的研究與探討。如果你想試用這個好用的技術，他也製作了線上版本，可以讓你直接上傳圖片並進行內容感知的圖片縮放。

網站名稱：JS IMAGE CARVER
網站網址：https://trekhleb.dev/js-image-carver/

JS Image Carver 簡介教學

透過 JS IMAGE CARVER 將圖片進行內容感知縮放。

所需時間 3 minutes

上傳圖片與調整長寬比

Pin

進入頁面後，預設會顯示熱氣球的範例圖，以及上方所提到示範的長寬比例，你可以直接點選「RESIZE」按鈕來實際演練內容感知縮放的技術。
或者，你可以直接點選「CHOOSE IMAGE」來選擇上傳你的圖片，並設定自己所需要的長寬比，再透過「RESIZE」就能立即開始進行圖片調整大小的動作。

圖片調整前後的差異

Pin

我利用免費圖庫當中下載一張圖片作為示範，將長寬比設定為各減少 50%，你可以從上方圖片中看到，原圖與重新調整後的前後差異。
從比較畫面來看，原本畫面中很小的人物，經過重新調整後，變得更為清晰與放大。就如同將原本的視角，由遠拉近一般呈現。
這裡值得注意的是，JS Image Carver 並非仙丹，他指示透過演算來不斷減少像素之間的距離，因此在某些情況當中，你的畫面可能會因此變形，就像我們的範例當中的山一樣，會因此被壓縮到，雖然看起來依然是正常的，不過與原本的山相比卻已經不一樣。
壓縮完成後，只需要點選右鍵另存，就能將調整後的圖片下載到電腦當中進行使用了。如果你希望壓縮調整的圖片畫質更好一些，可以在 Resize 前，將「Higher quality」選項勾選起來，缺點是處理時間會更久一點而已。

Pin

JS Image Carver 評價推薦優點

• 內容感知圖片調整大小
• 可重新調整圖片長寬比
• 可設定高畫質圖片壓縮