使用AJAX与JavaScript向服务器发送多个Canvas生成的图片

// 全局签名管理对象
$.sig = {
    signatures: {}, // 存储所有签名对象
    target: null    // 当前Canvas的目标ID
};

/**
 * 保存签名到指定目标并存储Base64数据
 */
function signatureSave() {
    var canvas = document.getElementById("sigcanvas");
    // 获取Canvas内容的Base64数据URL
    var dataURL = canvas.toDataURL("image/png");

    // 将签名显示在表单的相应位置
    document.getElementById($.sig.target).src = dataURL;

    // 将Base64数据URL和签名状态存储起来
    $.sig.signatures[$.sig.target] = {
        url: dataURL,
        hasSignature: true
    };
}

/**
 * 准备要上传的签名数据对象
 * @returns {Object} 包含所有已签名Base64数据的对象
 */
function getUploadData() {
    var uploadPayload = {}; // 这是我们将发送的JSON兼容对象

    // 遍历所有已存储的签名
    $.each($.sig.signatures, function (signatureId, signatureData) {
        // 仅包含已签名且有数据URL的签名
        if (signatureData.hasSignature === true && signatureData.url !== null) {
            // 将签名ID作为键，Base64 URL作为值添加到payload中
            uploadPayload[signatureId] = signatureData.url;
        }
    });
    return uploadPayload;
}

// 假设你还有其他表单数据
var formData = {
    // ... 其他表单字段 ...
    signatures: getUploadData() // 添加我们的签名数据payload
};

$.ajax({
    type: "POST",
    url: "your_server_endpoint.php",
    contentType: "application/json", // 关键：告知服务器请求体是JSON格式
    data: JSON.stringify(formData),  // 将整个JavaScript对象转换为JSON字符串
    success: function(response) {
        console.log("上传成功:", response);
        // 处理成功响应
    },
    error: function(xhr, status, error) {
        console.error("上传失败:", error);
        // 处理错误
    }
});

<?php
// 读取原始POST数据
$input_json = file_get_contents('php://input');

// 将JSON字符串解码为PHP对象（或关联数组）
$data = json_decode($input_json);

// 基本数据验证
if (!$data || !isset($data->signatures)) {
    http_response_code(400); // Bad Request
    echo json_encode(['status' => 'error', 'message' => 'Invalid data received.']);
    exit;
}

$signatures = $data->signatures;
$saved_files = [];

// 遍历每个签名数据
foreach ($signatures as $signatureId => $base64_data) {
    // 1. 移除Base64数据URL的前缀（例如："data:image/png;base64,"）
    $base64_data = str_replace('data:image/png;base64,', '', $base64_data);

    // 2. 关键：将Base64字符串中可能存在的空格替换为'+'
    // 这是因为Base64编码中使用'+'，但在URL传输过程中可能被编码为空格。
    $base64_data = str_replace(' ', '+', $base64_data);

    // 3. 将Base64字符串解码为二进制图片数据
    $image_binary_data = base64_decode($base64_data);

    // 4. 定义文件路径和文件名
    // 建议使用签名ID或生成唯一名称，以避免文件名冲突和安全问题
    $file_name = "signature_" . $signatureId . "_" . uniqid() . ".png";
    $upload_dir = "uploads/"; // 确保此目录存在且可写
    $file_path = $upload_dir . $file_name;

    // 5. 将二进制图片数据保存到文件
    if (file_put_contents($file_path, $image_binary_data)) {
        $saved_files[$signatureId] = $file_path;
    } else {
        // 记录文件保存失败的错误
        error_log("Failed to save signature: " . $signatureId);
    }
}

// 向客户端发送响应
echo json_encode(['status' => 'success', 'saved_signatures' => $saved_files]);
?>