Java 圖片裁剪預覽功能實戰：Jcrop 前端組件 + ImageIO 後端裁剪完整方案

頭像上傳、圖片裁剪是典型業務場景。本文採用 jQuery Jcrop 實現前端選區拖拽與實時預覽，後端利用 javax.imageio 完成無損裁剪並返回預覽圖，提供完整 JSP/Servlet/Java 三層代碼，可直接集成至項目。

前端頁面 (crop.jsp)

• 引入 jquery.Jcrop.css/js、jquery.min.js。
• 初始化 Jcrop：綁定 onChange/onSelect 回調，同步更新隱藏域 x, y, w, h。
• 預覽區動態縮放：根據選區比例計算 marginLeft/Top 實現即時縮圖。
• 表單提交至 success.jsp，攜帶原圖路徑與四座標參數。

$('#cutImage').Jcrop({
    onChange: showCoords, onSelect: showCoords,
    aspectRatio: xsize / ysize
}, function() { jcrop_api = this; });

後端裁剪核心類 (Upload.java)

public static void CutImage(String srcPath, String destPath,
                            int x, int y, int w, int h) {
    FileInputStream fis = new FileInputStream(srcPath);
    ImageInputStream iis = ImageIO.createImageInputStream(fis);
    Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName("jpg");
    ImageReader reader = it.next();
    reader.setInput(iis, true);
    ImageReadParam param = reader.getDefaultReadParam();
    param.setSourceRegion(new Rectangle(x, y, w, h)); // 關鍵：設置源區域
    BufferedImage bi = reader.read(0, param);
    ImageIO.write(bi, "jpg", new File(destPath));
    // finally 關閉流
}

接收裁剪參數 (success.jsp)

String imgPath = request.getParameter("imgPath");
int x = Integer.parseInt(request.getParameter("x"));
int y = Integer.parseInt(request.getParameter("y"));
int w = Integer.parseInt(request.getParameter("w"));
int h = Integer.parseInt(request.getParameter("h"));
Upload.CutImage(realPath + imgPath, realPath + "/images/" + newFileName, x, y, w, h);
out.print("<img src='images/" + newFileName + "'/>");

關鍵注意點

1. Jcrop 坐標基於顯示圖片，若前端縮放顯示，需按比例換算為原圖座標。
2. 僅演示 JPG，生產環境需根據 ImageIO.getImageReadersBySuffix 動態適配 PNG/GIF/BMP。
3. 大圖裁剪建議先縮略圖預覽，原圖異步處理，避免阻塞請求線程。

完整代碼結構清晰，前後端分離度高，可快速遷移至 Spring MVC、Spring Boot 等框架。