輕量高效：如何用 HTML5 Canvas 與 Cropper.js 實作「線上圖片剪裁」工具

發布日期： 2026年6月30日
難度： 中級
所需時間： 約 25-35 分鐘

前言

當我們在上傳頭像、行銷圖片或部落格封面時，經常需要將圖片剪裁成特定的比例（如 1:1 正方形或 16:9 寬螢幕）。如果每次都要打開 Photoshop 等重型軟體，實在有些大費周章。

這篇文章將帶大家使用 HTML5 Canvas、Vanilla CSS 以及著名的開源前端剪裁庫 Cropper.js，實作出一個無廣告、純瀏覽器本地端運算、且支援旋轉、翻轉以及圓形裁切的「線上圖片剪裁工具」！

為什麼選用 Cropper.js？

要在網頁上實現手勢拖曳、八角控制柄縮放、以及觸控螢幕縮放，如果從零開始寫座標運算，會有極大的工作量且容易在手機上出現卡頓。

Cropper.js 是目前全球最頂級且輕量的前端圖片剪裁庫：

⚡ 高效流暢：完全基於原生 JavaScript 撰寫，無額外框架依賴，並對行動端手勢優化。
📐 比例控制：內建限制寬高比（Aspect Ratio）的鎖定功能。
🔄 變形支援：支援原生旋轉、水平翻轉及垂直鏡像翻轉。
📥 匯出方便：能直接將選取範圍輸出為 HTML5 Canvas，方便後續轉為圖片下載。

第一步：規劃網頁介面 (HTML5)

我們將網頁切割為左邊的控制面板卡片（.controls-panel）與右邊的剪裁工作區卡片（.cropper-container-wrapper）：

<div class="app-container">
    <!-- 左側面板：預設比例與旋轉翻轉控制 -->
    <div class="card controls-panel">
        <h2><i class="fa-solid fa-sliders"></i> 剪裁設定工具</h2>
        <!-- 比例與旋轉控制按鈕 -->
        <!-- 即時寬高像素顯示 -->
        <div class="dimension-info">
            <span id="val-width">0 px</span> x <span id="val-height">0 px</span>
        </div>
        <!-- 匯出與複製按鈕 -->
    </div>
    
    <!-- 右側工作區：拖曳上傳與裁剪視窗 -->
    <div class="card cropper-container-wrapper" id="drop-container">
        <div class="upload-dropzone" id="dropzone">
            <!-- 拖曳上傳提示 -->
        </div>
        <div class="image-workspace" id="workspace">
            <img id="image-element" src="" alt="Source Image">
        </div>
    </div>
</div>

第二步：初始化 Cropper.js

我們引入 Cropper.js 的 CSS 與 JS 檔案後，在使用者選擇圖片並加載完成時，動態初始化 Cropper 實例：

let cropper = null;

function initCropper() {
    cropper = new Cropper(document.getElementById('image-element'), {
        aspectRatio: currentAspectRatio, // 例如 1:1, 16:9 或 NaN(自由比例)
        viewMode: 1,                    // 限制裁剪框不得超出圖片範圍
        dragMode: 'move',               // 滑鼠拖曳時移動圖片
        background: false,              // 關閉預設的棋盤背景
        autoCropArea: 0.8,              // 預設剪裁框大小為圖片的 80%
        crop() {
            // 即時監聽：當裁剪框移動或縮放時，獲取當前寬高像素值並顯示
            const data = cropper.getData(true);
            document.getElementById('val-width').innerText = `${data.width} px`;
            document.getElementById('val-height').innerText = `${data.height} px`;
        }
    });
}

第三步：加入旋轉與鏡像翻轉功能

利用 Cropper.js 的 API，我們可以非常簡單地加入圖像操作功能：

3-1. 90度旋轉

// 左旋與右旋 90 度
btnRotateL.addEventListener('click', () => cropper.rotate(-90));
btnRotateR.addEventListener('click', () => cropper.rotate(90));

3-2. 鏡像翻轉

我們使用變數 flipHValue 與 flipVValue 來儲存目前水平與垂直的縮放狀態（1 或 -1），並呼叫 scaleX() 與 scaleY() 進行鏡像反轉：

let flipHValue = 1;
btnFlipH.addEventListener('click', () => {
    flipHValue = -flipHValue;
    cropper.scaleX(flipHValue);
});

第四步：突破限制！實作「圓形剪裁」 (Circle Crop)

Cropper.js 預設只支援矩形剪裁。為了實現類似社群軟體大頭貼的「圓形剪裁」，我們使用了兩項前衛的技術：

4-1. CSS 視覺遮罩

在圓形剪裁模式下，我們在容器加上 .cropper-circle-mode，透過 CSS 將裁切框改成圓形：

.cropper-circle-mode .cropper-view-box,
.cropper-circle-mode .cropper-face {
    border-radius: 50%; /* 將正方形裁切框強制變為圓形 */
}

4-2. Canvas 畫布圓形剪裁與透明背景匯出

雖然畫面上看起來是圓形，但 getCroppedCanvas() 導出的依然是正方形。為了獲得真正的圓形透明 PNG 圖片，我們在後台使用額外的畫布，並利用 Canvas 的 clip() 來做邊界剪裁：

function getCroppedCanvas() {
    const croppedCanvas = cropper.getCroppedCanvas();

    if (!isCircleMode) {
        return croppedCanvas; // 矩形模式直接返回
    }

    // 圓形模式：建立新畫布進行圓形裁切
    const circleCanvas = document.createElement('canvas');
    const ctx = circleCanvas.getContext('2d');
    const size = Math.min(croppedCanvas.width, croppedCanvas.height);
    
    circleCanvas.width = size;
    circleCanvas.height = size;

    ctx.save();
    ctx.beginPath();
    ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.clip(); // 建立圓形剪裁區域

    // 將正方形剪裁圖片繪製進圓形中
    ctx.drawImage(croppedCanvas, 0, 0, size, size);
    ctx.restore();

    return circleCanvas; // 返回圓形透明背景的 Canvas
}

此技術可以匯出完美的透明背景圓形大頭貼，非常適合直接用在社群平台！

第五步：部署至 Nginx

如同前面的工具，我們將此 HTML 網頁部署在已配置好的伺服器中：

mkdir -p /var/www/wordpress/cropper
cp index.html /var/www/wordpress/cropper/index.html
chown -R www-data:www-data /var/www/wordpress/cropper

並在 Nginx 設定檔中配置了快取限制，使得每次使用者瀏覽 https://stillbuilding.life/cropper/ 時，瀏覽器都能加載到最新的程式碼，保證無縫的更新體驗。

結語

透過整合 Cropper.js 與 HTML5 Canvas 圓形剪裁技術，我們成功實作了一個完全在本地端運算、兼具美感與超高流暢度的圖片裁剪工具。

🔒 隱私安全：圖片完全在您的瀏覽器本地處理，不經過任何第三方伺服器，絕無外洩隱憂。
⚡ 多功能整合：支援多種熱門比例、無損旋轉、鏡像翻轉，以及一鍵下載/複製。

*歡迎前往我們的產生器頁面測試使用：(https://stillbuilding.life/cropper/)*

前言