PHP 實現網頁區域截圖：前端選區 + 後端圖像處理

整體架構

1. 前端：頁面載入目標圖片（或渲染 DOM 為 Canvas），監聽滑鼠事件獲取選區座標（`x1,y1,x2,y2`）。
2. 傳輸：將圖片 Base64 或 URL + 座標通過 AJAX 發送至後端。
3. 後端：PHP 使用 GD 或 Imagick 根據座標裁剪圖片，返回裁剪結果或保存路徑。

關鍵代碼示例

前端（jQuery + Canvas）

// 獲取選區座標
canvas.on('mouseup', function(e) {
    var rect = { x: startX, y: startY, w: endX-startX, h: endY-startY };
    // 發送到後端
    $.post('crop.php', { img: canvas.toDataURL(), rect: rect }, function(res) {
        // 處理返回
    });
});

後端

// crop.php
$data = json_decode(file_get_contents('php://input'), true);
$base64 = preg_replace('#^data:image/\w+;base64,#i', '', $data['img']);
$img = imagecreatefromstring(base64_decode($base64));
$rect = $data['rect'];
$crop = imagecrop($img, ['x'=>$rect['x'], 'y'=>$rect['y'], 'width'=>$rect['w'], 'height'=>$rect['h']]);
imagepng($crop, 'uploads/crop_'.time().'.png');
imagedestroy($img); imagedestroy($crop);
echo json_encode(['url'=>'uploads/crop_...']);

注意事項

• 大圖片 Base64 傳輸效率低，建議前端先上傳原圖獲取文件 ID，再發送座標讓後端讀取文件裁剪。
• 跨域圖片會污染 Canvas，需配置 `crossOrigin="anonymous"` 且服務端返回 CORS 頭。
• 生產環境推薦使用 Imagick 擴展，性能與格式支持優於 GD。