PHP 在線圖片裁剪工具全棧實現：前端 Canvas 交互與後端 ImageMagick 處理

系統架構概覽

一個完整的 Web 圖片裁剪方案，包含：

• 前端：HTML5 Canvas 實現多形狀選區繪製、拖拽、縮放、鍵盤微調、實時預覽。
• 上傳通道：multipart/form-data 表單提交至隱藏 iframe，避免頁面跳轉。
• 後端：PHP + ImageMagick (imagick 擴展) 接收文件、驗證、提取元數據 (寬高、幀數)、返回 JSON/JS 回調初始化前端狀態。
• 裁剪執行：前端計算幾何參數 → 發送至後端 → ImageMagick 執行精確裁剪 → 返回結果文件。

前端核心模塊 (單頁應用風格)

1. 界面結構

• #window：主窗口 (絕對定位、可拖拽、可縮放)。
• #workspace：畫布區域，包含 <img> (原圖)、<canvas> (主繪圖層)、<canvas> (臨時繪圖層)、#shapes (選區 DOM 覆蓋層)。
• #menubar：工具欄 (上傳、矩形/圓形/圓角矩形/圓弧/多邊形/任意形狀選區、裁剪/重置/設置按鈕)。
• #statusbar：信息欄 (文件大小、尺寸、幀數、坐標、裁剪區域座標)。
• 彈出面板：上傳表單、設置面板 (內部/外部裁剪、透明/白色背景)、幫助、關於。

2. 交互邏輯精華

3. 關鍵數據結構

var imgData = {
    url: 'upload/20230101120000123.jpg', // 服務端返回的文件路徑
    width: 800,  // 顯示寬度 (限制最大 800px)
    height: 600, // 等比縮放高度
    frames: 1,   // 幀數
    size: 102400 // 文件大小
};

var selection = {
    shape: 1,        // 當前形狀類型
    x: 100, y: 100,  // 左上角
    w: 200, h: 150,  // 寬高
    radius: 10,      // 圓角半徑
    startAngle: 0,   // 圓弧起始角度
    endAngle: 270,   // 圓弧結束角度
    points: [],      // 多邊形/任意形狀頂點
    inout: 0,        // 0=裁剪內部, 1=裁剪外部
    transparent: 1   // 1=透明背景, 0=白色背景
};

後端處理流程 (upload.php)

<?php
// 安全校驗：防止跨站調用
if (stripos($_SERVER['HTTP_HOST'], 'caijian.cc') === false) exit(0);

// 文件類型與大小驗證 (3MB 限制)
$allowedTypes = ['image/gif', 'image/jpeg', 'image/pjpeg', 'image/bmp', 'image/png'];
$maxSize = 3000000;

if (in_array($_FILES['ifile']['type'], $allowedTypes) && $_FILES['ifile']['size'] < $maxSize) {
    if ($_FILES['ifile']['error'] > 0) {
        echo "<script>parent.wrong('上傳錯誤: " . $_FILES['ifile']['error'] . "');</script>";
    } else {
        // 生成唯一文件名
        $ext = substr($_FILES['ifile']['name'], strrpos($_FILES['ifile']['name'], '.'));
        $filename = "upload/" . date("YmdHis") . rand(100, 999) . $ext;

        // 移動文件
        move_uploaded_file($_FILES['ifile']['tmp_name'], $filename);

        // ImageMagick 提取元數據
        $wand = NewMagickWand();
        MagickReadImage($wand, $filename);
        $w = MagickGetImageWidth($wand);
        $h = MagickGetImageHeight($wand);
        $f = MagickGetNumberImages($wand); // GIF 幀數

        // 返回 JS 回調初始化前端
        echo "<script>parent.upimg('$filename', {$_FILES['ifile']['size']}, $w, $h, $f);</script>";
    }
} else {
    echo "<script>parent.wrong('文件類型不支持或超過 3MB');</script>";
}
?>

裁剪執行端 (未展示代碼，邏輯推測)

前端發送裁剪參數 (region, imgdata, back, inout, toubai) 至處理腳本：

<?php
// 接收參數
$src = $_POST['imgdata'];        // 源文件路徑
$region = $_POST['region'];      // 裁剪區域幾何描述 (JSON 或座標字符串)
$inout = (int)$_POST['inout'];   // 內/外裁剪
$bg = (int)$_POST['toubai'];     // 背景類型

$wand = NewMagickWand();
MagickReadImage($wand, $src);

// 根據形狀構建裁剪蒙版/路徑
// 矩形: MagickCropImage
// 圓形/圓角/弧形/多邊形: MagickCompositeImage + 遮罩圖層
// 任意形狀: 路徑剪裁

// 背景處理
if ($bg == 0) {
    MagickSetImageBackgroundColor($wand, 'transparent');
} else {
    MagickSetImageBackgroundColor($wand, 'white');
}

// 輸出
header('Content-Type: image/png'); // 或根據原格式
MagickWriteImage($wand, 'output.png');
?>

技術債與現代化重構建議

總結

這是一個典型的「豐富前端交互 + 服務端圖像處理」全棧案例。前端展示了 Canvas 繪圖、狀態機管理、複雜交互協調的硬核技巧；後端演示了 ImageMagick 在 PHP 中的基礎調用。雖代碼風格屬於 jQuery 時代產物，但其交互邏輯設計、幾何數據模型、前後端協議約定仍具備參考價值。現代化重構應遵循「前後端分離、組件化、服務化、雲原生」原則。

1. 上一篇文章： PHP 自動分頁類實現原理與最佳實踐：從 SQL 改寫到 HTML 生成
2. 下一篇文章： PHP 文件上傳類庫設計模式解析：配置驅動、鏈式調用與安全防護

PHP 相關知識

PHP 檔案怎麼開啟？從下載誤區到本地執行環境完整指南

常見誤區：為什麼雙擊 .php 沒反應？ 很多初學者下載檔案

Zend Framework 資料庫配置與操作實戰解析

資料庫設定檔 在 application/configs/

PHP 安全隨機密碼生成：random_bytes、random_int 與 Sodium 最佳實踐

核心原則：使用密碼學安全隨機數生成器 (CSPRNG) 絕對

PHP 實作點擊式驗證碼：ClickCaptcha 類完整教學

ClickCaptcha：行動裝置友善的點擊驗證碼解決方案