在 Next.js 專案中透過裁剪和壓縮優化圖像上傳

作為前端開發人員，您很有可能曾經或正在從事涉及發布和顯示圖像的專案。如果你還沒有，那你很快就會的。因此，最近，當我們完成專案後，我們發現在顯示用戶提供的圖像時遇到了麻煩。

這一切是如何解開的
最大的問題是如何處理尺寸，尤其是影像的高度與寬度。將圖像設為 object-fit: cover 似乎是填充圖像容器的完美解決方案。但這又帶來了其他問題。使用者上傳不同尺寸的圖像；有些正在縮放，有些正在裁剪到同一個容器中。這種不一致的結果是 UI 不太吸引人，尤其是當用戶的個人資料圖片以不太明顯的方式裁剪時。

解
我決定尋找更好的解決方案。模仿社群媒體平台處理圖像上傳的方式，我認為讓用戶能夠在上傳之前裁剪和預覽圖像是件好事。經過一番研究，我終於找到了react-image-crop套件。該軟體包為用戶提供了即時裁剪圖像的功能，從而解決了部分問題。

在測試裁剪功能時，我注意到我正在處理的圖像大小為 9.5MB。這時我突然想到：為什麼不在客戶端先壓縮圖片再上傳呢？即使後端也處理這個問題，提前優化影像的能力可以節省頻寬並縮短上傳時間。

這讓我找到了另一個方便的套件：browser-image-compression。將其與react-image-crop合併使我現在可以即時裁剪和壓縮圖像，並且效果很好。

權衡
該解決方案並非沒有一些權衡。首先，您必須在專案中新增兩個套件；此外，由於壓縮開銷，小於 30KB 的影像實際上最終會變得更大。

我還使用Shadcn UI元件和react-dropzone套件對其進行樣式設計，以便讓使用者點擊選擇或拖放他們的圖像。

使用 Next.js 影像組件
為了獲得更好的效能，該解決方案可以與 Next.js Image 元件結合使用，該元件會自動最佳化影像。 Next.js 影像元件有助於提供適當大小的影像，從而縮短載入時間並提高整體效能。透過將裁切和壓縮與 Next.js 影像優化的強大功能結合，您可以為使用者提供更流暢、更有效率的體驗。

示範與原始碼
您也可以在這裡嘗試現場演示

這裡還有原始碼 GitHub 儲存庫。覺得有用請star！如果您考慮在專案中使用此解決方案，請告訴我。

以上是在 Next.js 專案中透過裁剪和壓縮優化圖像上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！