PHP 接收並儲存 HTML5 Canvas 圖片到伺服器

PHP 接收並儲存 HTML5 Canvas 圖片到伺服器

HTML5 <canvas> 元素讓瀏覽器端能繪製圖形、處理影像。若需將使用者在 Canvas 上的繪製內容（如電子簽名、繪圖）上傳並保存到伺服器，核心流程是：前端以 toDataURL() 取得 Base64 編碼的 Data URL，透過 AJAX POST 傳送；後端 PHP 解碼並寫入檔案。

前端關鍵步驟

// 取得 Canvas Data URL (預設 image/png)
const dataUrl = canvas.toDataURL();
// 發送至後端
fetch('save_canvas.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: 'img=' + encodeURIComponent(dataUrl)
});

後端 PHP 處理邏輯

接收 $_POST['img']，移除 Data URL 前綴（data:image/png;base64,），將空格還原為 +（Base64 標準），解碼後寫入檔案：

<?php
define('UPLOAD_DIR', __DIR__ . '/uploads/'); // 確保目錄可寫

$img = $_POST['img'] ?? '';
if (!$img) {
    exit('No image data received.');
}

// 移除 data URI scheme 前綴
$img = preg_replace('#^data:image/\w+;base64,#', '', $img);
// 修正空格為 + 號
$img = str_replace(' ', '+', $img);

// Base64 解碼
$data = base64_decode($img);
if ($data === false) {
    exit('Base64 decode failed.');
}

// 產生唯一檔名
$filename = UPLOAD_DIR . uniqid('canvas_', true) . '.png';
$result = file_put_contents($filename, $data);

echo $result ? $filename : 'Unable to save the file.';
?>

注意事項

• 目錄權限：UPLOAD_DIR 必須對 PHP 進程可寫。
• 檔案大小限制：post_max_size 與 upload_max_filesize 需足夠大，Base64 編碼後體積約增大 33%。
• 安全性：實際部署時應驗證 MIME 類型、限制副檔名、檢查檔案內容（如 getimagesize()），防止惡意腳本上傳。
• 效能：大量高解析度圖片建議使用 Blob + FormData 直接上傳二進位資料，避免 Base64 編碼開銷。

此法適用於電子簽名、簡易繪圖工具等輕量級 Canvas 存檔需求。