發布日期： 2026年6月30日
難度： 中級
所需時間： 約 20-30 分鐘
前言
不論是在社群媒體（如 Line, Facebook, IG）、Slack 工作區，還是個人網站中，「圓形大頭貼」已經是現代人必備的數位媒介。一般情況下，如果我們直接上傳一張長方形相片，系統往往會將其任意裁剪，甚至造成人臉偏離中心、縮放不均。
這篇文章將帶大家使用 HTML5 Canvas 與 Cropper.js，設計一個專門製作「圓形頭像」的線上剪裁小工具。我們不僅會鎖定 1:1 的圓形比例，還會實作「透明背景 PNG 導出技術」，讓您裁切好的頭像能夠在任何背景上完美貼合！
為什麼需要專屬的圓形剪裁工具？
雖然一般的圖片裁剪工具也能縮放正方形，但專屬圓形裁剪工具有以下三個顯著優勢： 1. 即時圓形遮罩預覽：透過 CSS 視覺遮罩，使用者在拖曳時就能直接看到「圓形邊界」，避免頭像的角落被不小心切除。 2. 鎖定 1:1 長寬比：強迫限制比例，確保輸出的圖片絕對是完美的正圓形。 3. Canvas 圓形透明通道裁剪：直接輸出帶有 Alpha 透明通道的 PNG 檔案，裁切範圍外的四個角落會完全透明，而非被填滿白色。
第一步：圓形遮罩的 CSS 魔法
我們引入 Cropper.js 庫後，由於它是基於矩形設計的，要如何將剪裁框顯示成圓形呢？
其實非常簡單！我們只需要覆寫 Cropper.js 所產生的 CSS 類名就可以了：
/* 將矩形裁切框強制變為圓形 */
.cropper-view-box,
.cropper-face {
border-radius: 50%;
outline: none; /* 隱藏預設的矩形外框線 */
}
/* 將裁切框以外的半透明遮罩維持不變 */
.cropper-view-box {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
}這段簡單的 CSS 代碼能讓使用者在上傳相片後，立刻在工作區看見一個精緻的半透明圓形裁切視窗，互動體驗非常完美。
第二步：鎖定 1:1 初始化設定
在 JavaScript 中，我們將 aspectRatio 鎖定為 1，並關閉不必要的格線與棋盤背景，將體驗聚焦於頭像裁剪：
function initCropper() {
cropper = new Cropper(document.getElementById('image-element'), {
aspectRatio: 1, // 鎖定 1:1 完美正圓形
viewMode: 1, // 限制裁剪框不可超出圖片邊界
dragMode: 'move', // 拖曳時平移底圖
background: false, // 隱藏預設棋盤格背景
autoCropArea: 0.8, // 預設裁切框大小為 80%
crop() {
// 即時更新直徑像素值
const data = cropper.getData(true);
document.getElementById('val-diameter').innerText = `${data.width} px`;
}
});
}第三步：Canvas 圓形剪裁演算法 (關鍵技術)
這是本專案最核心的算法。如果我們直接呼叫 cropper.getCroppedCanvas()，導出的一定是正方形的 JPG/PNG 圖片。
為了獲得真正的圓形透明背景 PNG，我們在記憶體中建立一個全新的臨時 Canvas，計算出內切圓大小，並使用 Canvas 的 clip() 方法對畫布路徑進行圓形剪裁後，才把圖片畫上去：
function getCroppedCircleCanvas() {
if (!cropper) return null;
// 1. 取得 CropperJS 的原始正方形 Canvas
const croppedCanvas = cropper.getCroppedCanvas({
imageSmoothingEnabled: true,
imageSmoothingQuality: 'high'
});
// 2. 建立新 Canvas，尺寸等於圓形直徑
const circleCanvas = document.createElement('canvas');
const ctx = circleCanvas.getContext('2d');
const size = Math.min(croppedCanvas.width, croppedCanvas.height);
circleCanvas.width = size;
circleCanvas.height = size;
// 3. 在畫布上畫一個正圓路徑，並對其進行剪裁 (Clip)
ctx.save();
ctx.beginPath();
ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI);
ctx.closePath();
ctx.clip(); // 此後的繪圖動作都會被限制在此圓形內
// 4. 將正方形圖片置中繪製進圓形中
ctx.drawImage(croppedCanvas, 0, 0, size, size);
ctx.restore(); // 恢復畫布狀態
return circleCanvas; // 返回圓形 Canvas，四角會是完全透明的
}最後，我們只需要對返回的 circleCanvas 執行 toDataURL('image/png')，就能觸下載並獲得完美的圓形透明大頭貼了！
第四步：一鍵下載與複製
與先前的工具類似，我們實作了一鍵下載 PNG 與複製到剪貼簿功能，極大簡化了使用者的日常操作流程：
// 下載圓形透明 PNG
btnDownload.addEventListener('click', function() {
const canvas = getCroppedCircleCanvas();
const link = document.createElement('a');
link.download = `circle_avatar_${Date.now()}.png`;
link.href = canvas.toDataURL('image/png');
link.click();
});結語
本篇文章透過對 CSS 圓形遮罩的覆寫 以及 HTML5 Canvas 的 clip() 圓形路徑裁剪算法，實作出一個完美的「圓形圖片剪裁工具」。
- 💡 個人品牌打造：非常適合直接嵌入在您的個人或企業網站中，提供訪客或客戶快速剪裁大頭貼的服務。
- ⚡ 完全開源無廣告：無任何伺服器傳輸，流暢度在手機與電腦上皆能達到 60 FPS！
*歡迎前往我們的產生器頁面測試使用：(https://stillbuilding.life/cropper-circle/)*
