.NET 後台 SHTML 頁面圖片上傳裁剪功能實作方案

需求

圖片上傳成功後，點擊圖片彈出裁剪介面，支援自訂尺寸裁剪，確定後儲存並替換原圖。

架構建議：前端裁剪 + 後端儲存

1. 上傳階段：前端上傳原圖至暫存目錄，回傳暫存 URL。
2. 裁剪階段：前端載入暫存圖片至裁剪元件（Cropper.js、CropperVue 等），使用者調整裁剪框。
3. 確定儲存：前端將裁剪參數（x, y, width, height, rotate）或直接將裁剪後的 Blob/Base64 送至後端 API。
4. 後端處理：依參數用 System.Drawing / ImageSharp / SkiaSharp 裁剪原圖，覆蓋正式儲存路徑，刪除暫存檔。

前端裁剪庫推薦

後端裁剪範例

// ASP.NET Core + ImageSharp
[HttpPost("crop")]
public IActionResult CropImage([FromBody] CropRequest req) {
    string tempPath = Path.Combine(_env.WebRootPath, "temp", req.TempFileName);
    string finalPath = Path.Combine(_env.WebRootPath, "uploads", req.FinalFileName);
    
    using (var image = Image.Load(tempPath)) {
        var rect = new Rectangle(req.X, req.Y, req.Width, req.Height);
        image.Mutate(x => x.Crop(rect));
        image.Save(finalPath);
    }
    System.IO.File.Delete(tempPath);
    return Ok(new { url = "/uploads/" + req.FinalFileName });
}

public class CropRequest {
    public string TempFileName { get; set; }
    public string FinalFileName { get; set; }
    public int X { get; set; }
    public int Y { get; set; }
    public int Width { get; set; }
    public int Height { get; set; }
}

安全性提醒

• 驗證檔案類型（Magic Number）、尺寸限制、儲存路徑防目錄遍歷。
• 暫存檔定期清理（背景任務或上傳時清理過期檔案）。
• 裁剪參數後端二次驗證（不超出原圖邊界）。